我对控制器函数中的参数感到困惑:
function ListCtrl($scope,Projects) { ... } function CreateCtrl($scope,$location,$timeout,Projects) { ... } function EditCtrl($scope,$routeParams,angularFire,fbURL) { angularFire(fbURL + $routeParams.projectId,$scope,'remote',{}). then(function() { ... }); }
这些控制器函数在routeProvider中被调用,但是没有给出任何参数。
$routeProvider. when('/',{controller:ListCtrl,templateUrl:'list.html'}). when('/edit/:projectId',{controller:EditCtrl,templateUrl:'detail.html'}). when('/new',{controller:CreateCtrl,templateUrl:'detail.html'}). otherwise({redirectTo:'/'}); });
我唯一能找到的东西,可能解释了什么是“Injecting Services Into Controllers”,这解释了$ location,$ timeout,但不是参数方法angularFire和fbURL。
我的具体问题是:
>控制器参数可以是什么?
>使用参数调用的控制器函数在哪里?或者参数不被调用,但只是与控制器相关联的东西,与许多Angular.js魔术的关联发生(如果是,我可以看到github上的源代码)?
> angularFire在哪里定义?
>参数中的fbURL如何链接到:
angular.module('project',['firebase']). value('fbURL','https://angularjs-projects.firebaseio.com/'). factory ...
>有一个地方,我可以看到所有的服务,例如。 $ location和$ timeout,Angular.js提供? (我试图找到列表但失败。)
控制器参数是依赖关系,它们由AngularJS注入器服务注入。他们可以是任何东西。但它们通常是将在控制器内使用的服务。
>使用参数调用的控制器函数在哪里?
控制器,以及指令,过滤器,服务和AngularJS中的许多其他东西都是函数。但是框架管理了很多时候和如何调用这些函数。
你所谓的东西关联有一个名字:依赖,如上所述。你所说的魔术是AngularJS依赖注入机制的行动。
当注入器调用这些函数(控制器和其他)时,它读取参数名称(例如:$ scope或$ http或angularFire),并搜索具有该名称的注册服务,然后将其作为参数提供函数被调用。
很简单。您可以通过多种方式指示注入器的“依赖性”(由注入器管理的参数)。
当你简单地将函数声明为函数myCtrl($ scope){}时,注入器将能够从参数名称中找到$ scope服务。但是如果你缩小JavaScript代码,注入器将不能再找到服务,因为参数名称将被修改为一个较小的字符串,如“a”或“x”。为了避免这个问题,可以使用数组符号来指定要注入的服务名称。在这种情况下,你可以这样声明你的函数:myCtrl = [‘$ scope’,function($ scope){}]
你将在AngularJS世界中看到很多数组符号的使用。现在你开始明白了。你甚至可以注入$ scope和angularFire,并在你的函数中使用其他名字(改变名字不推荐 – 这里的例子来为学习目的):[‘$ scope’,’angularFire’,function(skop,af) {}] – 这样,在函数里面你可以使用$ scope作为“skop”和angularFire作为“af”。数组中服务的顺序与参数的顺序匹配。
另一个例子:
var myController = ['$scope','$resource','$timeout',function($scope,$resource,$timeout) { // this controller uses $scope,$resource and $timeout // the parameters are the dependencies to be injected // by AngularJS dependency injection mechanism } ];
> angularFire在哪里定义?
在firebase模块中。
如你现在已经知道的,注入器将注入任何东西,只要它有“事物”名称注册和可用的记录。如果有一个“服务”与该名称,他能够提供它。
如何,然后,是建立这个名称=>注射器使用的东西列表?
模块是答案。一个模块只是一个name =>的列表。东东。它在一个模块中,您注册服务,工厂,过滤器,指令等。
仔细观察Module methods at the official documentation …几乎所有的接收作为参数:名称和一些“东西”(其中“东西”几乎总是一个函数,定义一个控制器,工厂或指令)。它是所有这些“东西”,将成为可注射通过他们指定的名称。
AngularJS服务,如“$ timeout”,“$ http”和其他默认情况下可用,因为ng模块已经由框架加载。
对于其他服务,您需要加载/需要模块。这就是你用ngRouter,firebase等做的…通过加载模块,其注册的东西可以注入你的模块/应用程序。
让我们看一个分步示例:
// An empty module: var module = angular.module('myModule',[]); // Now,adding an "injectable" constant: module.constant('niceStuff',{ blip: 'blop',blup: 307 }); // We could add a service: module.service('entityManager',['$http',function($http){ }]); // and so on... if I wanted to use "$resource" instead of "$http" // in the entityManager service above... // ...I would need to require the ngResource when creating the module above,// like this: var module = angular.module('myModule',['ngResource']); // because "$resource" is not available by default // NOW,anywhere else,since the code above already ran // I can use those NAMES as dependencies like this: // We are creating another module now: var koolModule = angular.module('km',['myModule']); // Note that I am requiring the prevIoUs module through its registered name // Now,anything I've declared in that module // - just like "ng" (by default) and "firebase" (required) does - // is available for "injection"!!! koolModule.controller('koolController',['niceStuff','entityManager',function(niceStuff,entityManager) { console.log(niceStuff.blip); // 'blop' console.log(niceStuff.blup + 10); // 317 }] );
这就是firebase的东西,如angularFire,变得可用!我们做了什么?首先,我们创建了“myModule”,并注册了NAMED的东西。后来,我们需要为我们的“koolModule”的“myModule” – 那些NAMES已经可用在注入器名称=>东西列表。
>如何在参数中的fbURL链接
正如我们刚才看到的,大多数模块方法只是注册事物 – 给名称添加名称,以便以后可以通过这些名称注入和/或使用。
当调用module.value(‘fbURL’,’https://angularjs-projects.firebaseio.com/’)时,fbURL(和指定的值)被注册到name =>东西列表…在这种情况下,名称是“fbURL”,值/ stuff是URL字符串 – 但它可以是任何!
>有一个地方,我可以看到所有的服务,例如。 $ location和$ timeout,Angular.js提供?
是的,API参考:http://docs.angularjs.org/api/
注意左侧导航如何组织…按模块!首先,ng模块,有吨的指令,服务,过滤器等。然后,下面,其他模块(ngRoute,ngResource,ngMock等),每个包含自己的服务,fitlers或指令…
感谢您有机会分享这些想法。我喜欢写他们。