angularjs - 了解 Angular.js Controller 参数

Question

我刚刚开始学习 Angular.js，我一直在研究 project.js in the "Wire up a Backend" example on the Angular home page 。

我对 Controller 函数中的参数感到困惑:

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() {
     ...
   });
}  

这些 Controller 函数在 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 。

我的具体问题是:

Controller 参数可以是什么？

用参数调用的 Controller 函数在哪里？或者参数没有被调用而只是与 Controller 相关联的东西，其中关联发生了很多 Angular.js 魔法(如果是这样，我可以在 github 上看到源代码)？

angularFire 在哪里定义？

参数中的 fbURL 如何链接到:

angular.module('project', ['firebase']).
    value('fbURL', 'https://angularjs-projects.firebaseio.com/').
    factory ...

有没有可以看到所有服务的地方，例如$location 和 $timeout ，Angular.js 提供的？ (我试图找到列表但失败了。)

Answer 1

Controller 参数可以是什么？

Controller 参数为依赖项，即AngularJS注入(inject)器服务注入(inject)的。他们可以是任何东西。但它们通常是将在 Controller 内部使用的服务。

带参数调用的 Controller 函数在哪里？

Controller ，以及指令、过滤器、服务和 AngularJS 中的许多其他东西都是函数。但是框架管理了很多当和如何调用这些函数时。

你所谓的与相关联的东西有一个名称:依赖，如上所述。你所说的魔法是AngularJS依赖注入(inject)机制在起作用。

当注入(inject)器调用这些函数( Controller 和其他函数)时，它会读取参数名称(例如:$scope或$http或angularFire)并搜索具有该名称的注册服务，然后将其提供为调用函数时的参数。

很简单。您有多种方法可以将您的“依赖项”(由注入(inject)器管理的参数)指示给注入(inject)器。

当您简单地将函数声明为function myCtrl($scope) {}时，注入(inject)器将能够从参数名称中找到$scope服务。但是如果你缩小的JavaScript代码，注入(inject)器将无法再找到服务，因为参数名称将被修改为更小的字符串，比如“a”或“x”。为了避免这个问题，可以使用数组符号指定要注入(inject)的服务名称。在这种情况下，你可以像这样声明你的函数:myCtrl = ['$scope', function($scope) {}]
你会在 AngularJS 世界中看到很多数组符号的用法。现在你开始理解它。您甚至可以注入(inject)$scope和angularFire，并在您的函数中将它们与其他名称一起使用(更改名称是，不推荐-此示例用于学习目的): 104567914” - 这样，在函数内部，您可以将 $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 在哪里定义？

在火力基地模块中。

正如您现在已经知道的，注入(inject)器会注入(inject)任何东西，只要它注册了“东西”名称并在其记录中可用。如果有一个名称为的“服务”，他可以提供它。

那么，如何构建注入(inject)器使用的这个['$scope', 'angularFire', function(skop, af) {}]列表呢？

模块就是答案。 模块只不过是name => stuff的列表。它位于模块中，您可以在其中注册服务、工厂、过滤器、指令等。

仔细看Module methods at the official documentation……几乎所有的都接收作为参数:名称和一些的东西“(其中“东西”几乎总是一个函数，定义 Controller 、工厂或指令)。所有这些“东西”都将通过它们指定的名称变成可注入(inject)。

“$timeout”、“$http”等AngularJS服务默认可用，因为框架已经加载了ng模块。

对于附加服务，您需要加载/要求模块。这就是你对ngRouter、火力基地等所做的……通过加载模块，它在中注册的内容是“1045656”，可用于“107920”注入(inject)您的模块/应用程序。

让我们看一个分步示例:

// 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”——这些名称已经在注入(inject)器 name => stuff列表中可用。

参数中的 fbURL 链接如何

正如我们刚刚看到的，大多数模块方法只是注册事物——将命名为，因此它们可以被注入(inject)和/或稍后通过这些名称使用.

当name => stuff被调用时，fbURL(和指定的值)被注册到module.value('fbURL', 'https://angularjs-projects.firebaseio.com/')列表中......在这种情况下，名称是“fbURL”，值/东西是URL字符串 - 但它可以是任何东西!

有没有可以看到所有服务的地方，例如$location 和 $timeout，Angular.js 提供的？

是的，API 引用:http://docs.angularjs.org/api/

注意左侧导航是如何组织的...通过模块!首先是 ng 模块，包含大量指令、服务、过滤器等。然后，下面是其他模块(ngRoute、ngResource、ngMock 等)，每个模块都包含自己的服务、过滤器或指令...

感谢您有机会分享这些想法。我喜欢写它们。