82

我刚刚开始学习 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,但不解释参数方法angularFirefbURL.

我的具体问题是:

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

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

  3. 在哪里angularFire定义?

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

    angular.module('project', ['firebase']).
        value('fbURL', 'https://angularjs-projects.firebaseio.com/').
        factory ...
    
  5. 有没有一个地方我可以看到Angular.js 提供的所有服务,例如$location和?$timeout(我试图找到列表但失败了。)

4

4 回答 4

157
  • 控制器参数可以是什么?

    控制器参数是依赖项,由 AngularJS 注入器服务注入。它们可以是任何东西。但它们通常是控制器内部使用的服务

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

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

    你称之为关联的东西有一个名字:dependency,如上所述。你所说的魔法是 AngularJS 的依赖注入机制在起作用。

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

    很简单。您有几种方法可以将您的“依赖项”(由注入器管理的参数)告知注入器。

    当您简单地将函数声明为function myCtrl($scope) {}时,注入器将能够$scope从参数名称中找到服务。但是如果你缩小JavaScript 代码,注入器将无法再找到服务,因为参数名称将被修改为更小的字符串,如“a”或“x”。为避免此问题,可以使用数组表示法指定要注入的服务名称。在这种情况下,您可以像这样声明您的函数:myCtrl = ['$scope', function($scope) {}]

    你会在 AngularJS 世界中看到很多数组符号的使用。现在你开始理解它了。您甚至可以在函数中注入$scopeangularFire使用它们与其他名称(不建议更改名称- 此示例用于学习目的):['$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 => stuff注射器使用的这个列表呢?

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

    仔细查看官方文档中的 Module 方法......几乎所有这些方法都作为参数接收:名称和一些“ stuff ”(其中“stuff”几乎总是一个函数,定义控制器、工厂或指令)。正是所有这些“东西”将通过它们指定的名称变得可注入

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

    对于其他服务,您需要加载/需要模块。这就是你对ngRouterfirebase等所做的事情......通过加载模块,它的注册内容可用于在你的模块/应用程序中注入。

让我们看一个分步示例:

// 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 之类的 firebase 东西变得可用的方式!我们做了什么?首先,我们创建了“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 等),每个模块都包含自己的服务、过滤器或指令......

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

于 2013-10-08T07:41:35.773 回答
1

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

控制器函数使用ngController指令实例化,或者如果您在创建路由期间使用$routeProvider. AngularJS 透明地为您执行此操作,并使用DI.

DI 通过匹配参数的名称(或某些时间顺序)来工作。所以$scope会得到当前的范围,$http会得到http服务

于 2013-10-08T03:59:05.560 回答
1

首先,选择这个框架做得很好。这是最好的。您看到的带有 $ 符号的变量是注入的,并且是标准框架的一部分。这些服务将使您的生活更加轻松。考虑控制器的最佳方式是它们是脚本表。它们有助于分离代码。不要将它们视为方法。您看到的那些变量,例如 $timeout 和 $scope 是在您需要完成某些事情时会派上用场的服务。该框架的所有文档都位于http://docs.angularjs.org/api/但我将从本教程 http://docs.angularjs.org/tutorial/开始。

angularfire 不是框架的一部分。它是另一种利用该框架创建强大的实时分布式网络的服务。当您加载 angularfirejs 时,它附带服务,然后作为您看到的参数注入。

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

fbURL 只是一个您可以创建的变量,您在问题中放置的代码只是有关如何制作它的说明。

Angularjs 不是那种你可以通过查看它提供的东西来学习的框架类型。仅仅因为它提供了一切。您可以带来的一切来制作出色的应用程序。相反,您应该专注于询问谷歌如何解决您的角度问题。

还可以查看 youtube 上的视频。你会发现一些很棒的。

于 2013-10-08T03:00:01.780 回答
1

根据 toxaq 评论,这里是评论作为答案

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

    它主要可以是服务、工厂、值、常量等......您之前在某处定义或在路由定义上使用解析。

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

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

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

    这样,您首先设置要注入的服务的名称,然后根据需要为这些服务指定不同的名称。事实上,如果你想稍后最小化你的 Angular 代码,这是强制性的(因为最小化会重命名变量,所以 Angular 仍然需要能够找到服务名称)。

  3. angularFire 在哪里定义?

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

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

    就像您似乎理解的那样,控制器的参数是从控制器的定义中通过角度注入的。Angular 将查看所有注册的服务,并尝试找到与指定参数名称匹配的参数并注入相应的服务!

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

    有关 Angular 中包含的所有内置服务、过滤器、指令的列表,请查看 API:http ://docs.angularjs.org/api

于 2013-10-08T03:11:33.400 回答