injector解析

injector 有两种类型 ,ProviderInjector 和InstanceInjector .两者get方法执行起来有差异

ProviderInjector 的结构如下:
`
{
get: function getService(serviceName){
return cacheProvider[serviceName] ;
}
}

`
InstanceInjector 结构如下Pseudocode

{
   get: function getService(serviceName){
        instanceCache[serviceName] ?...

        s = ProviderInjector.get(serviceName)
        invoke(s);
   ...}
}

之所以有这两种injector . providerInjector用来处理module结构里队列中存放的 p结构（第一章提到的），将之处理成Provider构型 ---- 形如 s: {$get:{}} 结构的。
instanceInjector用来实例化Provider构型的。

在service中使用到的$injector,比如 service($injector) $injector就是instanceInjector。

InstanceInjector 会先从ProviderInjector 里拿到同名service再实例化。

ProviderInjector 闭包里有叫cacheProvider的对象,顾名思义会缓存provider。
那么往这个cacheProvider缓存存放Provider构型，则需要$provider.provider。

我们稍作跳跃。

在angular创建injector对象后 ,会利用injector实例化所有模块中的fn.
在所有的模块中‘ng’模块是最先进行处理的。

• 我们来模拟ng的过程

         +--------------+
         |     |ng|     | <------------+
         +--------------+              |                                       
                   |                   |  require: 'ng-location'
            <hasRequire?>-----Y--------+
            1.
  
  
         +-------------------------+
          |   |_ng-location__|     | 
          |   | ___ ng_______|     |
          |                        | 
         +-------------------------+                                         
                   |                                       
               <hasRequire?>
                   |  N
                   V 
            2.    
  moduleNgLocation = angular.module('ng-location')               //angularModule(module);
  1.拿到模块  回顾第一章 每一个 module 都有 invokeQueue 和 configBlock 和 runBlocks，
   configBlocks里是这样的结构 ['$inject' ,'invoke' ['s' ,fn(s){}] 
   然后  分别处理该模块的 invokeQueue 和 configBlock       
   runInvokeQueue(moduleFn._invokeQueue);
   runInvokeQueue(moduleFn._configBlocks);
  
   runInvokeQueue的执行过程是  拿其中一条记录['$inject' ,'invoke' ,['$provider' ,fn($provider){}] （第一章提到的p结构）为例
  
       p结构的第一个数据是$inject
       providerInjector.get('$inject');
       前文提到providerInjector.get方法是从从providerCache里取，那么‘$inject’已经存在于providerCache中了吗？
       答案是 Yes  . 在创建好providerInjector和  instanceInjector 中就已经放入providerCache中了
       (providerCache.$inject = providerInjector) .除了$injector ,providerCache中$provider对象也早早的定义了。他们是始祖对象。
  
  
    providerInjector.get('$inject') 的值实际上就是providerInjector自身.
    p结构的第二个数据invoke,
    所以去执行invoke方法 ， providerInjector.invoke( ['$provider' ,fn($provider){}])  //p结构的第三个数据
    invoke会先实例化参数’$provider'   会取providerCache中取$provider   ,$provider 随着providerCache定义的时候定义了。
  

  providerCache = {
  $provide: {
  provider: supportObject(provider),
  factory: supportObject(factory),
  service: supportObject(service),
  value: supportObject(value),
  constant: supportObject(constant),
  decorator: decorator
  }
  },
  然后就可以将$provider作为参数 实例化fn
  实例化过程：

    args.unshift(null);
  
    return new (Function.prototype.bind.apply(fn, args))();
  
    实例化好之后就会放入instanceCache中了
        
   至此ng-location模块处理结束 ,ng-location模块中factory都已实例化好，ng-location退出栈。
  回到ng模块，处理方式赘同。
  
         +--------------+
         |     |ng|     | 
         +--------------+                                                  
                   |                
            <hasRequire?>-----Y-------->requireAlreayTackled已处理
                                                           |
                                     new (Function.prototype.bind.apply(ngModule, args))();
  
            3.
  

在ngModule中 provider($compile,$compileProvider) .前文提到$provider.provider方法是往cacheProvider中添加Provider构型的方法。至此能窥探到至关重要的$compile了。

我们回顾下angular的工作过程：
寻找$rootElement ,创建一个injector，这个injector的invoke方法 可以实例化 形如['a',fucntion(a){}]数组的函数。
实际的代码如下
injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector',
function bootstrapApply(scope, element, compile, injector) {
scope.$apply(function() {
element.data('$injector', injector);
compile(element)(scope);
});
}]
);

bootstrapApply会被执行。会调用rootScope.$apply(fn);

$apply(fn), 和 $digest() 是scope中的两个方法 ， 该方法会触发 scope上watchers函数.watchers函数正是双向绑定中 data变化反应到ui element中的 机关所在。watch函数是在compilelink阶段绑定到element上的，因为定义指令时element会作为参数传给compilelink函数.
$apply(fn) 实际上是先执行fn再调用$rootScope.$digest();
后面会详细介绍scope.

上面说到 $apply(fn) 实际上是先执行fn;
执行过程
element.data('$injector', injector);
compile(element)(scope);

下章讲解 compile， u element与数据间的因缘在compile展现