浅析AngularJS中的生命周期和延迟处理

而该行为又会引用到一些还没创建的组件

此间,咱们再谈谈一些常用的高端级的垄断(monopoly)反转容器(Inversion of Control
containers):延迟加载(lazy-loading),生命周期管理(lifetime
management),以及延缓的创始/管理(deferred creation/resolution)。
 
推迟加载(Lazy-Loading)

所谓延迟加载正是当您须要用到对象时候才对其开展实例化。相当多依赖注入系统都会在一始发就制造组件,作为它的可凭借项目。可是有时候,直到在应用中应用它们在此以前,你都不会想去实例化那一个零部件。Angular
中,三个很好的事例便是,当您在配置的时候去设置贰个行为,而该作为又会援用到有个别还没创立的零件。

假诺你想拦截种类内建的 $log 服务,因而你把它存在了 $rootScope
里面。当然笔者不提议如此做,也才那样比喻相比轻巧有效。为了挡住,你在配备的时候使用了
$provide 然后调用修饰方法。就算那时候你想直接援引 $rootScope
的话,由于循环援引你会获得个要命。而化解案是因此 $injector 延迟加载
$rootScope 。

上边的代码只会在 $rootScope 第壹次被应用的时候才去加载它。

 

$provide.decorator(, [, ,
   ($delegate, $injector) {
     log = $delegate.log.bind($delegate);
    $delegate.log = (msg) {
       rs = $injector.get();
       (rs.logs === undefined) {
        rs.logs = [];
      }
      rs.logs.push(msg);
      log(msg);
    };
     $delegate;
}]);

从此今后的调用都会得到同一的单例 $rootScope。
这里有个可用例子。笔者前边好像听过有个(不对的)说法(Angular
只扶助单例) … 当然不是真的。$injector
中的方法正是用来给您管理你的组件的生命周期的。

生命周期管理

生命周期涉及到您什么管理组件的实例。私下认可情形,当你注入八个 Angular
的依赖,重视注入就能够帮您创设它的一个别本然后在你的使用里面收音和录音它。大大多情形下这着实是大家所企望的。而略带处境下,会须求一律组件的多少个实例。借使上面包车型地铁计数服务:

 
 

Counter($log) {
  $log.log();
}

angular.extend(Counter.prototype, {
  count: 0,
  increment: () {
    .count += 1;
     .count;
  }
});

Counter.$inject = [];

app.service(, Counter);

你的使用要追踪分歧的计数器。而你注入该服务后,总会获得平等的计数器。那难道是
Angular 的范围?

本来不是。重复三次,通过 $injector
服务你能够在其他时候创制叁个新别本。上面的代码用了三个独立的计数器:
 

app.run([, , ,
   (rs, c, i) {
    rs.count = c.count;
    rs.update = c.increment;
    rs.update2 = () {
       c = i.instantiate(Counter);
      rs.count2 = c.count;
      rs.update2 = () {
        c.increment();
        rs.count2 = c.count;
      };
    };
  }]);

您能够看看计数器都以被单独的实例追踪的,这里是可用例子。固然你须求平常生成新实例,你可以像那样注册服务:
 

app.factory(, [,
   (i) {
     {
      getCounter: () {
         i.instantiate(Counter);
      }
    };
  }]);

发出四个内需的实例正是那么粗略,并且你能够用你的工厂组件来顶替
$injector:
 

app.run([, ,
   (rs, cf) {
     c1 = cf.getCounter(),
      c2 = cf.getCounter();
    rs.count = c1.count;
    rs.update = c1.increment;
    rs.count2 = c2.count;
    rs.update2 = () {
      rs.count2 = c2.increment();
    };
  }]);

您能够看看这几个全体版本的可用例子。如您所见,用
Angular
的内建依赖注入是截然有希望处理你组件的生命周期的。那延迟管理(deferred
resolution)又怎么着呢 – 比方说,某个组件你必要在 Angular
已经铺排好之后引入,何况亟需用它们的重视来包装起来。

延期管理(Deferred Resolution)

大家已经介绍了在 Angular
中得以延迟管理重视的一种办法。当你想包装某个事物的时候,你能够调用
$injector 服务的 instantiate
,然后它能够由此参数嗅探来缓和注重,看起来就疑似用 $inject
的静态属性同样,只怕也能够经过检查你传给它的数组来完成的。也正是说,下边这一个是全然可行写法:
 

$injector.instantiate(['dependency', Constructor]);

你还能够调用带装饰数组的点子。倘使你有二个情势依赖于 $log
服务,你能够运营时经过延迟管理来调用它,像上面那样:

 

 myFunc = [, ($log) {
  $log.log();
}];
$injector.invoke(myFunc);

您能够看看这一个可用例子(张开你的调控台,看看你按下按钮之后发生了何等)。
 
总结

总结,Angular
的正视注入提供了繁多尖端天性,你在购销使用生产线上会希望并且有的时候会用到它们。factories,
services, 和 providers 的方便让 Angular
开垦者日常爆发错觉,感到这里唯有独一选取可用。而玄妙之处在于 $injector
服务,你可以用它生成所需的单例,创立新的零件大概动态引用带注重的办法。

龙8游戏,末段要留神的是,你客商端代码里面包车型地铁流入就算在 Angular
之外也是可用的。大家来看三个在 Angular 之外包装的,通过注入调用 $log
服务的例子,点这里。为啥要把
‘ng’ 传入方法的数组?它是 Angular
的主导模块,当你包装你的模块的时候是会被隐式增加的,不过一旦您的通令要转换自个儿的流入实例的时候,你就必需显式加多了。

你恐怕感兴趣的篇章:

  • 关于angularJs指令的Scope(作用域)介绍
  • 浅谈AngularJs指令之scope属性详解
  • AngularJs
    Scope详解及示例代码
  • 深深深入分析AngularJS框架中$scope的效劳与生命周期
  • AngularJS中怎么着运用$parse或$eval在运转时对Scope变量赋值
  • AngularJS中监视Scope变量以及外界调用Scope方法
  • angularJS
    中$scope方法使用指南
  • AngularJS指令用法详解
  • AngularJS入门教程之数据绑定原理详解
  • AngularJS入门教程之数据绑定用法示例
  • AngularJs入门教程之情况搭建+创立应用示范
  • AngularJS深入商讨scope,承接结构,事件系统和生命周期