将工厂注入控制器 angularjs + typescript答案

【问题标题】：Inject factory into a controller angularjs + typescript将工厂注入控制器 angularjs + typescript
【发布时间】：2014-07-03 15:52:21
【问题描述】：

我一直在尝试使用 Angularjs 和 Typescript 将工厂注入控制器，但我收到此错误 Error: [$injector:unpr] http://errors.angularjs.org/1.2.9/$injector/unpr?p0=AuthenticationProvider%20%3C-%20Authentication。

我一直在研究，但找不到解决方案，因为我所做的与某些解决方案相似。

这是我的登录控制器模块

import Authentication = require('AuthenticationService');
module LoginController{

export interface UIMainScope extends ng.IScope {
    login: (credential: any) => void;
}

export class Controller {
    static $inject = ['$scope', '$http', 'Main', 'Authentication'];
    constructor (){}
}
export = LoginController
angular.module('App').controller('Controller', LoginController.Controller);

我是不是忘记在此处注入一些东西来调用该方法？

【问题讨论】：

标签： javascript angularjs typescript angularjs-factory

【解决方案1】：

这里的问题与 Angular 的 $inject 不能从 Typescript require 中获利有关。这些是独立的特征，它们代表不同的概念。

angular的[$inject][1]，作为内置的Dependency Injection，只能注入，已经注册的。它无法访问 Typescript 对象 - 只能访问它自己的（角度的）对象工厂。

正如错误所说：unknown provider 'AuthenticationProvider'，我们必须调用：

angular.module('App')
  .factory('Authentication', [... its dependencies ...
      , (params) => new Authentication(params)]);

现在，我们已经在 Angular 中准备好了身份验证，我们可以在控制器内部请求它

语法可能如下所示：

// module with Scope and Controller
module LoginController
{
  export interface UIMainScope extends ng.IScope 
  {
    login: (credential: any) => void;
  }

  export class Controller
  {
    // constructor, instantiating private members this.$scope ...
    constructor($scope: UIMainScope
       , $http :ng.IHttpService
       , Main: any
       , Authentication: any)
    ...
  }
}

// and finally pass it into angular as .controller()
angular.module('App')
  .controller('Controller', [
     '$scope', '$http', 'Main', 'Authentication',
     ($scope, $http, Main, Authentication)  =>
     {
        return new LoginController.Controller($scope, $http, Main, Authentication);
     }
]);

最后：在某些情况下，Authentication 提供者不会从使用 Angular 启动的蜜蜂中获利，我们也可以使用它。我们根本不需要注册它。只需调用 require 并访问它的方法...但我们必须跳过 angular¨s $inject 过程...

这可能不是这种情况，但想象一些 QueryStringBuilder... 可能只消耗方法 Builder.build(...) 中传递的参数

【讨论】：

这与缺少声明 .factory('Authentication') 的事实有关。如果这是在另一个模块中（例如'Auth'），请不要忘记在angular.module('App',[...here reference like, 'Auth']) 中引用该模块。我回答中的最后一行代表标准角度 .controller() 定义。该错误代表标准情况，当缺少某些依赖项时......它有帮助吗？
是的。谢谢！我想当我这样做的时候： static $inject = ['$scope', '$http', 'UIMainUIModelService', 'Authentication']; ==> 这基本上是注入到模块中，而导入将导入和引用模块？
$inject 是 angular 世界，import 是 typescript 世界。他们是完全独立的。不同的概念。 $inject 只能注入，已经注册的。它无权访问导入的 TS 内容。所以，如果你要在 angular 中注册.factory('Authentication'...)（如果我们喜欢 TS，这将与我为控制器展示的方式/样式几乎相同） - 那么你可以要求 $inject 使用它...希望现在更清楚;）
这种解释现在很有意义。当您说注册到 Angular 时，您的意思是在应用程序本身或控制器模块中注册？
是的，通过 App 模块内的 factory() 注入

【解决方案2】：

似乎您没有专门使用 Angular 注册的 Authentication 服务：

angular.module('App').controller('Controller', LoginController.Controller)
    // fix based on your code 
    .service('Authentication',Authentication.AuthenticationService);

此视频可能会有所帮助：https://www.youtube.com/watch?v=Yis8m3BdnEM&hd=1

【讨论】：