AngularJs concepts详解及示例代码(4)

  Injector是一个服务定位器。每一个Angular应用,都会有一个单独的injector。Injector提供一个通过名称查找对象实例的途径。Injector会在内部cache中保持所有对象实例,所以重复调用相同的名称时,返回的都是同一个对象实例。如果对象不存在,那么它会请求实例工厂(instance factory)去创建一个新实例。

  Module是一个配置injector的实例工厂的方法,被称为”provider”。 

// Create a module var myModule = angular.module('myModule', []) // Configure the injector myModule.factory('serviceA', function() { return { // instead of {}, put your object creation here }; }); // create an injector and configure it from 'myModule' var $injector = angular.injector('myModule'); // retrieve an object from the injector by name var serviceA = $injector.get('serviceA'); // always true because of instance cache $injector.get('serviceA') === $injector.get('serviceA');//true

  但是injector的真正牛X的地方在于它可以用于调用方法和”instantiate” type。这个美妙的特性是允许method和types请求他们所依赖的资源,而不是寻找他们。

// You write functions such as this one. function doSomething(serviceA, serviceB) { // do something here. } // Angular provides the injector for your application var $injector = ...; /////////////////////////////////////////////// // the old-school way of getting dependencies. var serviceA = $injector.get('serviceA'); var serviceB = $injector.get('serviceB'); // now call the function doSomething(serviceA, serviceB); //上面是传统的老方法~下面是angular说自己的牛X方法 /////////////////////////////////////////////// // the cool way of getting dependencies. // the $injector will supply the arguments to the function automatically $injector.invoke(doSomething); // This is how the framework calls your functions

  注意,我们唯一需要写的,就是我们的function,在function的arguments中列出方法依赖的资源即可!当angular调用function时,他会使用”call”方法,自动填充function agruments。

  留意下面的例子中是如何在constructor中列出依赖的。当ng-controller实例化controller时,将自动提供所依赖的资源。没有必要去创建、寻找、创建injector引用来加载依赖资源。

<!DOCTYPE HTML> <html lang="zh-cn" ng-app="timeExample"> <head> <meta charset="UTF-8"> <title>injector</title> <style type="text/css"> .ng-cloak { display: none; } </style> </head> <body> <div ng-controller="ClockCtrl"> Current time is : {{time.now}} </div> <script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> angular.module("timeExample", []).factory("myClock", function ($timeout) { var time = {}; (function tick() { time.now = new Date().toString(); $timeout(tick, 1000); })(); return time; }); /** * * @param $scope * @param myClock 这里自动插入了依赖的myClock!! * @constructor */ function ClockCtrl($scope,myClock) { $scope.time = myClock; } </script> </body> </html>

十一、Angular Namespace

为了防止名称冲突,angular会在object的名称中加入前缀$。请不要在代码中使用$前缀以避免冲突。(-_-!! )

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfdyz.html