了解Angular.js控制器参数 [英] Understanding Angular.js controller parameters

查看：141
本文介绍了了解Angular.js控制器参数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚开始学习Angular.js和我在一直在看 project.js电线上来就角主页后端的例子。

我感到困惑的控制器功能的参数：

 功能的ListCtrl（$范围，项目）{
  ...
}功能CreateCtrl（$范围，$位置$超时，项目）{
  ...
}功能EditCtrl（$范围，$位置$ routeParams，angularFire，fbURL）{
   angularFire（fbURL + $ routeParams.projectId，$范围，'远程'，{}）。
   然后（函数（）{
     ...
   }）;
}

这些控制器的功能被称为在routeProvider，但没有一个参数中给出。

  $ routeProvider。
  当（'/'，{控制器：的ListCtrl，templateUrl：list.html'}）。
  当（'/编辑/：专案编号'，{控制器：EditCtrl，templateUrl：detail.html'}）。
  当（'/新'，{控制器：CreateCtrl，templateUrl：detail.html'}）。
  否则（{redirectTo：'/'}）;
}）;

我能找到到目前为止，这可能是唯一的解释发生了什么事情是注入服务整合到控制器，这也说明 $位置， $超时，但不是参数的方法 angularFire 和 fbURL 。

我的具体问题是：


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


  2. 在哪里叫他们参数控制器的功能？或者参数不叫，但只是用的东西所在公会有很多神奇Angular.js发生控制器相关的（如果是的话，我可以看到在github源$ C ​​$ C）


  3. 在哪里定义 angularFire ？


  4. 是怎样的 fbURL 在链接到参数：

      angular.module（'项目'，['火力']）。
        值（'fbURL'，'https://angularjs-projects.firebaseio.com/'）。
        厂...


  5. 有一个地方，我可以看到所有的服务，例如， $位置和 $超时，即Angular.js提供？ （我试图找到列表中，但失败了。）



解决方案

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

    控制器参数的依赖，这是按AngularJS注射器注射服务。他们可以是任何东西。但是，他们通常会在控制器内使用在服务


  • 在哪里叫他们参数控制器的功能？

    控制器，以及指令，过滤器，服务和AngularJS许多其他的事情都的功能即可。但框架管理有很多的在和如何调用这些函数。

    你所谓的关联的东西有一个名字：依赖，如上所述。你叫什么魔术是AngularJS 依赖注入机制的行动。

    当这些功能（控制器等）是由喷油器调用时，它读取参数名称（例如： $范围或 $ HTTP 或 angularFire ）并搜索注册服务使用该名称，然后当函数被调用的参数提供。

    这很简单。您有几种方法来指导你的依赖性（由喷油器管理参数）喷油器。

    在简单地声明你的函数为函数myCtrl（$范围）{} ，喷油器就能够找到 $范围服务形成的参数名称。但如果您缩小中的JavaScript code时，喷射器将无法以再找到该服务，因为该参数名称将被修改为较小的字符串，如一或× 。为了避免这个问题，它可以指定服务名称使用的数组表示法注入。在这种情况下，你会声明你的功能如下： myCtrl = ['$范围'，函数（$范围内）{}]

    您会看到很多的数组表示法在AngularJS世界的使用。现在，你开始了解它。你甚至可以注入 $范围和 angularFire 和其他名称在函数中使用它们（更名为不建议 - 在这里这个例子是用于学习目的）： ['$范围，angularFire'，函数（skop，AF）{}] - 这样一来，在函数内部可以使用$范围为skop和angularFire为AF。数组中的服务的订单匹配参数的顺序。


另外一个例子：

  VAR = myController的['$范围，$资源'，'$超时'，
    功能（$范围，$资源，$超时）{
        //这个控制器采用$范围，$资源和$超时
        //参数是要注射的依赖关系
        //通过AngularJS依赖注入机制
    }
];

让我们来看看一步一步的例子：

  //空模块：
VAR模块= angular.module（'Mymodule中'，[]）;//现在，加入注射不断：
module.constant（'niceStuff'，{昙花一现：blop'，BLUP：307}）;//我们可以添加一个服务：
module.service（'EntityManager的'，['$ HTTP'，函数（$ HTTP）{}]）;//等等......如果我想用$资源，而不是$ HTTP
//上面的EntityManager服务...
// ...我需要创建上面的模块时，要求ngResource，
//像这样：var模块= angular.module（'Mymodule中'，['ngResource']）;
//因为$资源是不是默认情况下可用//现在，其他任何地方，因为code上面已经跑了
//我可以使用这些名称作为依赖这样的：//现在我们正在创造另一个模块：
VAR koolModule = angular.module（'公里'，['MyModule的']）;
//请注意，我需要通过其注册名称的previous模块//现在，任何我的模块中声明
//  - 就像NG（默认）和火力（必需）那样 - 
//可用于注入！koolModule.controller（'koolController'，
    ['niceStuff'，'EntityManager的'功能（niceStuff，EntityManager的）{
        的console.log（niceStuff.blip）; //'blop
        的console.log（niceStuff.blup + 10）; // 317
    }]
）;

这是怎么火力点东西，比如angularFire，可用！我们做了什么？首先，我们创建了MyModule的，并注册NAMED东西给它。后来，我们所需要的MyModule的我们koolModule - 而这些名字分别在注射器名称=＆GT已经上市;东西列表。

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

I'm just starting to learn Angular.js and I've been looking at the project.js in the "Wire up a Backend" example on the Angular home page.

I'm confused about the parameters in the controller functions:

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

These controller functions are called in the routeProvider, but none of the parameters are given.

$routeProvider.
  when('/', {controller:ListCtrl, templateUrl:'list.html'}).
  when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}).
  when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}).
  otherwise({redirectTo:'/'});
});

The only thing I could find so far that possibly explains what's going is "Injecting Services Into Controllers", which explains $location, $timeout, but not parameters method angularFire and fbURL.

My specific questions are:

  1. What can the controller parameters be?

  2. Where are the controller functions called with their parameters? Or the parameters are not called but are just stuff associated with the controller where the association occurs with lots of Angular.js magic (if so, can I see the source code on github)?

  3. Where is angularFire defined?

  4. How is the fbURL in the parameter linked to:

    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.)

解决方案

  • What can the controller parameters be?

    The controller parameters are dependencies, which are injected by AngularJS injector service. They can be anything. But they are usually the services that will be used inside the controller.

  • Where are the controller functions called with their parameters?

    Controllers, as well as directives, filters, services and so many other things in AngularJS are functions. But the framework manages a lot of when and how these functions are called.

    What you call stuff associated has a name: dependency, as mentioned above. What you call magic is AngularJS dependency injection mechanism in action.

    When these functions (controllers and others) are called by the injector, it reads the parameters names (for example: $scope or $http or angularFire) and searches for a registered service with that name, which is then provided as the parameter when the function is called.

    It is simple. You have several ways to instruct about your "dependencies" (parameters managed by the injector) to the injector.

    When you simply declare your function as function myCtrl($scope) {}, the injector will be able to find the $scope service form the parameter name. But if you minify the JavaScript code, the injector will not be able to find the service anymore, because the parameter name will be modified to a smaller string, like "a" or "x". To avoid this problem, it is possible to specify the service name to be injected using the array notation. In this case, you would declare your function like this: myCtrl = ['$scope', function($scope) {}]

    You will see a lot of array notation usage in AngularJS world. Now you start to understand it. You could even inject $scope and angularFire and use them with other names in your function (changing the name is not recommended - this example here comes for learning purposes): ['$scope', 'angularFire', function(skop, af) {}] - this way, inside the function you can use $scope as "skop" and angularFire as "af". The order of the services in the array matches the order of the parameters.

Another example:

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

  • Where is angularFire defined?

    In the firebase module.

    As you already know now, the injector will inject anything as long as it has that "thing" name registered and available on its records. If there is a "service" with that name, he is able to provide it.

    How, then, is built this name => stuff list which the injector uses?

    Module is the answer. A module is little more than a list of name => stuff. It is in a module where you register services, factories, filters, directives, and more.

    Look carefully at the Module methods at the official documentation... almost all of them receive as parameters: name and some "stuff" (where "stuff" is almost always a function, defining either a controller, or a factory, or a directive). It is all this "stuff" that will become injectable through their specified name.

    AngularJS services like "$timeout", "$http" and others are available by default because the ng module is already loaded by the framework.

    For additional services, you need to load/require the module. That's what you do with ngRouter, firebase, etc... By loading the module, its registered stuff are available for injection in your module/app.

Let's see a step-by-step example:

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

This is how firebase stuff, like angularFire, becomes available! What have we done? First, we created the "myModule", and registered NAMED stuff to it. Later, we required the "myModule" for our "koolModule" - and those NAMES were already available in the injector name => stuff list.

  • How is the fbURL in the parameter linked

    As we've just seen, most module methods are merely registering things - giving names to things so they can be injected and/or used through these names later.

    When module.value('fbURL', 'https://angularjs-projects.firebaseio.com/') is called, fbURL (and the specified value) is registered into the name => stuff list... in this case, the name is "fbURL", and the value/stuff is the URL string - but it could be anything!

  • Is there a place where I can see all the services, e.g. $location and $timeout, that Angular.js provides?

    Yes, the API reference: http://docs.angularjs.org/api/

    Pay attention at how the left-side navigation is organized... by modules! First, the ng module, with tons of directives, services, filters, etc. Then, below, the other modules (ngRoute, ngResource, ngMock, and so on), each one containing their own services, fitlers or directives...

Thanks for the opportunity of sharing these thoughts. I enjoyed writing them.

这篇关于了解Angular.js控制器参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆