了解 Angular.js 控制器参数

我刚开始学 Angular.js 我一直在看 在 Angular 主页的“ Wire up a Backend”示例中的 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。

我的具体问题是:

  1. 控制器参数可以是什么？

  2. 用参数调用的控制器函数在哪里？或者参数没有被调用，而只是与控制器相关联的东西，在这些控制器中出现了许多 Angular.js 的魔法(如果是这样，我可以在 github 上看到源代码吗?)？

  3. angularFire在哪里定义？

  4. 参数中的 fbURL如何链接到:

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

  5. Is there a place where I can see all the services, e.g. $location and $timeout, that Angular.js provides? (I tried to find the list but failed.)

56657 次浏览
小开

首先选择这个框架做得很好。这是最好的。您在 $sign 中看到的那些变量是注入的，它们是标准框架的一部分。这些服务会让你的生活更轻松。考虑控制器的最佳方式是它们是脚本表。它们有助于分离代码。不要把它们看作是方法。您看到的诸如 $timeout & $scope 之类的变量是在您需要完成某些事情时将派上用场的服务。框架的所有文档都在 http://docs.angularjs.org/api/，但是我想从这个教程 http://docs.angularjs.org/tutorial/开始。

角火不是框架的一部分。它是另一个利用框架来创建强大的实时分布式网络的服务。当你加载 angularfirejs 时，它附带了服务，然后作为你看到的参数注入。

要回答第二个问题，您传递的参数可以是任何东西，只要您提供相应的服务。请参考以下内容为控制器制作自己的参数: Http://docs.angularjs.org/guide/dev_guide.services.creating_services

FbURL 只是一个您可以创建的变量，您在问题中放置的代码只是关于如何创建它的指令。

Angularjs 不是那种你可以通过观察它提供什么来学习的框架。仅仅因为它提供了一切。你可能带来的一切，使一个伟大的应用程序。相反，你应该专注于问谷歌如何解决你的问题与角度。

也可以在 youtube 上看看视频，你会发现一些很棒的视频。

小开

根据 toxaq 的评论，以下是作为答案的评论

  1. 控制器参数可以是什么？

    It can mostly be services, factories, values, constants, etc... that you have defined somewhere before OR using resolve on a route definition.

  2. 用参数调用的控制器函数在哪里？

    下面是定义控制器的正确方法:

    angular.module('project').controller('EditCtrl', [
'$scope',
'$location',
'$routeParams',
'angularFire',
'fbURL',
function($scope, $location, $routeParams, angularFire, fbURL) {
...
}
]);

    这样，您首先设置要注入的服务的名称，然后如果愿意，可以给这些服务一个不同的名称。事实上，如果以后想要最小化角度代码，这是必须的(因为最小化将重命名变量，角度仍然需要能够找到服务名称)。

  3. 角火的定义在哪里？

    在定义项目模块时，还包括了 firebase 模块依赖项。在 firebase 模块内部，必须有一个 angularFire 服务，就像前面的 fbURL 一样。

  4. 参数中的 fbURL 如何链接

    就像你理解的那样，控制器的参数是从控制器的定义角度注入的。Angular 将查看所有已注册的服务，并尝试找到一个匹配的参数名称，并注入相应的服务！

  5. 有没有一个地方可以让我看到 Angular.js 提供的所有服务，比如 $location 和 $timeout？

    对于所有内置的服务列表，过滤器，指令包括在角度，看看 API: http://docs.angularjs.org/api

小开

用参数调用的控制器函数在哪里？

控制器函数是使用 控制器指令实例化的，或者如果您在使用 $routeProvider创建路由时提到了控制器。AngularJS 透明地为您执行此操作，并注入使用 DI在控制器上定义的参数。

DI 通过匹配参数的名称(或某些时间顺序)来工作。因此 $scope将获得当前范围，$http将获得 http 服务

小开
最佳答案

  • 控制器参数可以是什么？

    控制器参数为 依赖关系，通过 AngularJS 注射器服务为 注射。他们可以是任何东西。但它们通常是控制器内部使用的 服务。

  • 用参数调用的控制器函数在哪里？

    在 AngularJS 中，控制器以及指令、过滤器、服务和其他许多东西都是 功能。但是框架管理大量的 什么时候和 怎么做这些函数被调用。

    你所谓的 相关的东西有一个名字: 依赖性，如上所述。你所谓的 魔法是 AngularJS依赖注入机制在行动。

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

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

    当您简单地将函数声明为 function 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
}
];

  • 角火的定义在哪里？

    在 火炉 模组。

    正如你现在已经知道的，注射器将注入任何东西，只要它有“事情”姓名注册和可用的记录。如果有一个“服务”与该 姓名，他是能够 提供它。

    那么，如何构建注入器使用的 name => stuff列表呢？

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

    仔细看看 正式文件中的模块方法... ... 几乎所有的都作为参数接收: 姓名和一些“ 东西”(其中“ stuff”几乎总是 功能，定义控制器、工厂或指令)。正是这些“东西”将通过它们指定的 姓名变成 可注射的。

    AngularJS 服务如“ $timeout”、“ $http”等在默认情况下是可用的，因为框架已经加载了 模组。

    For additional services, you need to load/require the 模组. That's what you do with 路由器, 火炉, etc... By loading the 模组, its registered stuff are 可供注射 in 你的 module/app.

让我们看一个循序渐进的例子:

// 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
}]
);

这就是为什么像 angularFire 这样的防火材料变得可用！我们做了什么？首先，我们创建了“ myModule”，并向其注册了 NAMED 内容。后来，我们要求“ koolModule”使用“ myModule”——这些名称已经在注入器 name => stuff列表中可用。

  • 参数中的 fbURL 是如何链接的

    正如我们刚才看到的，大多数 模组方法仅仅是注册事物——给事物赋予 名字，这样它们就可以成为 注射并且/或者以后通过这些名称来使用。

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

  • 有没有一个地方可以让我看到 Angular.js 提供的所有服务，比如 $location 和 $timeout？

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

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

感谢有机会分享这些想法，我很喜欢写这些想法。


提交答案