Angular.JS学习之依赖注入$injector详析

var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
var FN_ARG_SPLIT = /,/;
 // 获取服务名
var FN_ARG = /^\s*(_"color: #ff0000">注入器的创建

AngularJS的API也提供了injector部分，通过injector部分，通过injector可以使用get,has,instantiate,invoke以及上节提到的annotate等方法，通过源码可以更清晰的理解。


function createInternalInjector(cache, factory) {
 // 对服务注入器 providerInjector而言，只根据服务名获取服务，factory会抛出异常
 function getService(serviceName, caller) {
  if (cache.hasOwnProperty(serviceName)) {
  if (cache[serviceName] === INSTANTIATING) {
   throw $injectorMinErr('cdep', 'Circular dependency found: {0}',
     serviceName + ' <- ' + path.join(' <- '));
  }
  return cache[serviceName];
  } else {
  try {
   path.unshift(serviceName);
   cache[serviceName] = INSTANTIATING;
   return cache[serviceName] = factory(serviceName, caller);
  } catch (err) {
   if (cache[serviceName] === INSTANTIATING) {
   delete cache[serviceName];
   }
   throw err;
  } finally {
   path.shift();
  }
  }
 }

 function invoke(fn, self, locals, serviceName) {
  if (typeof locals === 'string') {
  serviceName = locals;
  locals = null;
  }

  var args = [],
   // 解析并获取注入服务列表
   $inject = annotate(fn, strictDi, serviceName),
   length, i,
   key;

  for (i = 0, length = $inject.length; i < length; i++) {
  key = $inject[i];
  if (typeof key !== 'string') {
   throw $injectorMinErr('itkn',
     'Incorrect injection token! Expected service name as string, got {0}', key);
  }
  // 注入的服务作为参数传入
  args.push(
   locals && locals.hasOwnProperty(key)
   "htmlcode">

instanceInjector = (instanceCache.$injector =
   createInternalInjector(instanceCache, function
(serviceName, caller) { var provider = providerInjector.get(serviceName + providerSuffix, caller); return
 instanceInjector.invoke(provider.$get, provider, undefined, serviceName);
   }));


红色部分即为factory函数，它显示通过providerInjector获取相应服务的提供者serviceProvider,然后调用instanceInjector的invoke方法在serviceProvider上下文执行serviceProvider的$get方法，返回服务对象并保存在缓存中。这样，便完成了服务对象(依赖)的获取和缓存。
invoke方法也很简单，它的入参分别问fn, self, locals, serviceName，即要执行的函数，函数执行的上下文，提供的options选项和服务名。首先获取函数的所有依赖名，通过annotate方法完成之后，如果options中提供了对于名称的依赖，则使用，否则通过get方法获取依赖，最后传入函数，并将函数的执行结果返回。invoke返回的结果往往是一个服务对象。
instantiate方法主要根据提供的构造函数创建一个示例，用作依赖或提供服务。值得一提的是并没有通过new关键字创建对象，而是通过ECMA5提供的Object.create来继承函数的原型对象实现，非常巧妙。
has方法则是相继判断serviceProvider和service是否存在于缓存中。
至此，$injector对象创建完毕。
注册服务（依赖）
服务不可能凭空而来，我们需要自己实现或者外部引入服务或依赖。所以，注册服务的模块也是值得深究的。AngularJS提供了多种注册服务的API，但是我们着重关注的是provider方法，其他factory，service方法都是基于此进行构建的。
这些方法（provider，factory等）绑定在providerCache.provide对象上，而我们通过angular.module(′app′,[]).provider(...)方式调用的provider函数，会在module加载期间将调用（该调用抽象成一个数组，即［provider,method,arguments］）绑定在内部的invokeQueue数组中，最终在providerCache.provide对象上，而我们通过angular.module(′app′,[]).provider(...)方式调用的provider函数，会在module加载期间将调用（该调用抽象成一个数组，即［provider,method,arguments］）绑定在内部的invokeQueue数组中，最终在providerCache.provide对象上调用provider方法，其他的controller，directive等方法类似，不过是绑定在providerCache.controllerProvider,providerCache.controllerProvider,providerCache.compileProvider对象上。


function provider(name, provider_) {
 assertNotHasOwnProperty(name, 'service');
 if (isFunction(provider_) || isArray(provider_)) {
  provider_ = providerInjector.instantiate(provider_);
 }
 if (!provider_.$get) {
  throw $injectorMinErr('pget', "Provider '{0}' must define $get factory method.", name);
 }
 return providerCache[name + providerSuffix] = provider_;
 }

 function enforceReturnValue(name, factory) {
 return function enforcedReturnValue() {
  var result = instanceInjector.invoke(factory, this);
  if (isUndefined(result)) {
  throw $injectorMinErr('undef', "Provider '{0}' must return a value from $get factory method.", name);
  }
  return result;
 };
 }

 function factory(name, factoryFn, enforce) {
 return provider(name, {
  $get: enforce !== false "color: #ff0000">流程

最后，在基本的实现已经完成的基础上，我们走一遍具体的注入流程，更易于我们的深入理解。


angular.module("app",[])
  .provider("locationService",function(){
  ...
 })
 .controller("WeatherController",function($scope,locationService,$location){
  locationService.getWeather()
   .then(function(data){
    $scope.weather = data;
   },function(e){
    console.log("error message: "+ e.message)
   });
 })


我们不关心具体的代码实现，仅仅使用上述代码作为演示。
首先确定AngularJS上下文的范围，并且获取依赖模块（在此处为空）；
继续注册服务（依赖），将serviceProvider缓存至providerCache中；
声明控制器；
在此获取injector示例，通过执行invoke函数，获取[“injector示例，通过执行invoke函数，获取[“scope”，”locationService”,”location”]依赖列表，通过location”]依赖列表，通过injector的get方法获取相应的依赖对象。对于scope和scope和location服务而言，在AngularJS初始化时已经注入到Angular中，因此可以获取相应的provider对象，执行相关的方法返回scope和scope和location对象，而locationService则在provider中进行了声明，因此获取到locationServiceProvider对象，通过调用instanceInjector.invoke(locationServiceProvider.$get, locationServiceProvider, undefined, “locationService”)返回locationService对象。
最后将所有的依赖组装成数组[scope,locationService,scope,locationService,location]作为参数传递给匿名函数执行。
总结
至此，依赖注入完成。大家对依赖注入$injector有没有进一步的了解呢？以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

        
        

            
上一篇：seajs学习教程之基础篇
            
下一篇：Javascript中内建函数reduce的应用详解
        
        
一句话新闻
高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。