angularjs – 了解Angular.js控制器参数

前端之家收集整理的这篇文章主要介绍了angularjs – 了解Angular.js控制器参数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚开始学习Angular.js,我一直在看着 project.js in the “Wire up a Backend” example on the Angular home page

我对控制器函数中的参数感到困惑:

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或指令…

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

猜你在找的Angularjs相关文章