我刚刚开始学习Angular.js,并且一直在Angular主页上的“连接后端”示例中查看project.js。
我对控制器功能中的参数感到困惑:
function ListCtrl($scope, Projects) {
...
}
function CreateCtrl($scope, $location, $timeout, Projects) {
...
}
function EditCtrl($scope, $location, $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:'/'});
});
我能找到到目前为止,这可能解释发生了什么事情的唯一的事情是“注入服务整合到控制器”,这说明$location
,$timeout
而不是参数的方法angularFire
和fbURL
。
我的具体问题是:
控制器参数可以是什么?
带有参数的控制器功能在哪里调用?还是不调用参数,而只是与控制器相关联的东西,其中发生了很多Angular.js魔术(如果是这样,我可以在github上查看源代码)吗?
在哪里angularFire
定义?
fbURL
参数中的如何链接到:
angular.module('project', ['firebase']).
value('fbURL', 'https://angularjs-projects.firebaseio.com/').
factory ...
在哪里可以看到Angular.js提供的所有服务,例如$location
和$timeout
?(我试图找到列表,但失败了。)
控制器参数可以是什么?
该控制器的参数是依赖关系,其被注入由AngularJS喷射器的服务。他们可以是任何东西。但是它们通常是将在控制器内部使用的服务。
带有参数的控制器功能在哪里调用?
控制器,指令,过滤器,服务以及AngularJS中的许多其他东西都是函数。但是该框架管理着许多何时以及如何调用这些功能。
所谓的关联事物有一个名称:dependency,如上所述。您所说的魔术是实际使用的AngularJS依赖项注入机制。
当注入器调用这些函数(控制器和其他函数)时,它将读取参数名称(例如:$scope
或$http
或angularFire
)并搜索具有该名称的注册服务,然后在调用该函数时将其作为参数提供。
很简单。您可以通过多种方法来指导您对注射器的“依赖关系”(由注射器管理的参数)。
当您简单地将函数声明为时function myCtrl($scope) {}
,注入器将能够$scope
从参数名称中找到服务。但是,如果您最小化JavaScript代码,则注入器将不再能够找到服务,因为参数名称将被修改为较小的字符串,例如“ a”或“ x”。为避免此问题,可以使用数组符号指定要注入的服务名称。在这种情况下,您可以这样声明函数:myCtrl = ['$scope', function($scope) {}]
您将在AngularJS世界中看到很多数组符号用法。现在您开始了解它。你甚至可以注入$scope
,并angularFire
与使用它们的其他名字在你的函数(更改名称是不建议-在这里这个例子是为了学习目的):['$scope', 'angularFire', function(skop, af) {}]
-这样一来,在函数内部可以使用$范围为“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 => stuff
喷油器使用的清单呢?
模块就是答案。一个模块只不过是一个列表name => stuff
。它在模块中,您可以在其中注册服务,工厂,过滤器,指令等。
仔细看一下官方文档中的Module方法...几乎所有方法都以参数形式接收:name和一些“ stuff ”(其中“ stuff”几乎总是一个函数,定义了控制器,工厂或指令) )。正是这些“东西”将通过其指定的名称注入。
默认情况下,AngularJS服务(例如“ $ timeout”,“ $ http”等)可用,因为ng模块已由框架加载。
对于其他服务,您需要加载/要求模块。这就是你做什么ngRouter,火力等..通过加载的模块,其注册的东东都可以注射在你的模块/应用程序。
让我们看一个分步示例:
// 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”-并且这些名称已经在注射器name => stuff
列表中可用。
如何在参数中链接fbURL
正如我们已经看到的,大多数模块方法只是注册事物-给事物命名,以便以后可以通过这些名称注入和/或使用它们。
当module.value('fbURL', 'https://angularjs-projects.firebaseio.com/')
被调用时,fbURL(和指定值)登记在name => stuff
列表...在这种情况下,名称为“fbURL”,和值/东西是URL字符串-但它可以是任何东西!
是否可以在其中看到Angular.js提供的所有服务,例如$ location和$ timeout?
是的,API参考:http : //docs.angularjs.org/api/
在注重如何左侧导航组织...通过模块!首先是ng模块,其中包含大量指令,服务,过滤器等。然后,下面是其他模块(ngRoute,ngResource,ngMock等),每个模块都包含自己的服务,适配程序或指令。
感谢您分享这些想法的机会。我喜欢写它们。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句