AngularJS 用法总结

引言

介绍 AngularJS 的一些基础和重要知识。

背景

我使用 AngularJS 一段时间了，我之所以使用它，是因为我们的客户要求我们在我们的项目中使用这项技术。 从完全空白到对 AngularJS 有一些了解，我认为有必要写一些关于我对 AngularJS 理解的东西。 

1.双向数据绑定

有很多不同种类的 MV** 框架非常流行，AngularJS 就是其中之一（MVVM）。 

MV** 框架最重要的事情是它们可以分离 View 层和 Model 层，解耦你的代码。 MVC、MVP、MVVM 都有相同的目标，它们之间的区别在于如何将模型层与视图层关联起来。

数据如何在模型层和视图层之间流动是关键问题。 双向数据绑定是视图上的更改可以反映在模型层中，反之亦然。 那么 AngularJS 如何进行双向绑定以及它如何变成脏检查呢？ 让我们从一个前端问题开始

html:
<input type="button" value="increase 1" id="J-increase" />
<span id="J-count"></span>

js:
<script>
    var bindDate = {
        count: 1,
        appy: function () {
            document.querySelector('#J-count').innerHTML = this.count;
        },
        increase: function () {
            var _this = this;
            document.querySelector('#J-increase').addEventListener('click', function () {
                _this.count++;
                appy();
            }, true);
        },
        initialize: function () {            
            this.appy();            
            this.increase();
        }
    };
    bindDate.initialize();
</script>

如上例，有两个过程
a. 视图层影响模型层：点击页面上的按钮会增加计数。
b. 模型层反映视图层：在 'count' 改变后，它会通过 'apply' 函数在视图上表示出来。

这是我们使用 jQuery 或其他库的方式，有三个明显的缺陷
a. 它涉及太多 DOM 操作。
b. 过程很复杂。
c. 代码耦合度太高，不易编写单元测试。

让我们看看 AngularJS 如何处理数据

第 1 步，添加 Watcher：当数据更改定义需要检查哪个对象时，需要先注册。 

$watch: function(watchExp, listener, objectEquality) {
    var scope = this,
        array = scope.$$watchers,
        watcher = {
            fn: listener,
            last: initWatchVal,
            get: get,
            exp: watchExp,
            eq: !!objectEquality
        };
    if (!array) {
        array = scope.$$watchers = [];
    }
    array.unshift(watcher);
}

第 2 步，脏检查：当指定范围下的数据发生变化时，需要循环注册的 $$watchers = [...]

 $digest: function() {
     while (length--) {
         watch = watchers[length];
         watch.fn(value, lastValue, scope);
     }
 }

这实现了双向数据绑定，你可以看到类似于自定义事件，并使用了观察者设计模式或发布者-订阅者模式。

2.依赖注入

让我们看看如果我们不使用 DI（依赖注入）如何解决对象之间的相互依赖关系。

function Car() {
    ...
}
Car.prototype = {
    run: function () {...}
}
 
function Benz() {
    var cat = new Car();
}
Benz.prototype = {
    ...
}

如上所示，Benz 类依赖于 Car 类，它通过使用内部 New 来解决依赖关系。 这样做显然不好，代码耦合度高，不利于维护。
我们知道 javascript 语言没有注释机制，让我们看看 AngularJS 如何实现它。

第 1 步，模拟注释

function annotate(fn, strictDi, name) {
    var $inject;
    if (!($inject = fn.$inject)) {
        $inject = [];
        $inject.push(name);
    }else if (isArray(fn)) {
        $inject = fn.slice(0, last);
    }
    return $inject;
}
createInjector.$$annotate = annotate;

function createInjector(modulesToLoad, strictDi) {
    var providerCache = {
        $provide: {
            provider: supportObject(provider),
            factory: supportObject(factory),
            service: supportObject(service),
            value: supportObject(value),
            constant: supportObject(constant),
            decorator: decorator
          }
      },
    instanceCache = {},
    instanceInjector = (instanceCache.$injector =
        createInternalInjector(instanceCache, function(serviceName, caller) {
            var provider = providerInjector.get(serviceName + providerSuffix, caller);
            return instanceInjector.invoke(provider.$get, provider, undefined, serviceName);
        }));
    return instanceInjector;
}

function invoke(fn, self, locals, serviceName) {
    var args = [],
        $inject = annotate(fn, strictDi, serviceName);
 
    for (...) {
        key = $inject[i];        
        args.push(
          locals && locals.hasOwnProperty(key)
          ? locals[key]
          : getService(key, serviceName)
        );
    }
    if (isArray(fn)) {
        fn = fn[length];
    }      
    return fn.apply(self, args);
}

//controller1
app.controller('controller1', function ($rootScope) {
    $rootScope.$on('eventType', function (arg) {
        ......
    })
})
 
// controller2
app.controller('controller2', function ($rootScope) {
    $rootScope.$emit('eventType',arg);
    or
    $rootScope.$broadcast('eventType',arg);
})

// register service
app.service('Message', function () {
    return {
        count: void(0);
    }
})
 
// controller1
app.controller('controller1', function ($scope, Message) {
    $scope.count = 1;
    Message.count = $scope.count;
});
 
// controller2
app.controller('controller2', function ($scope, Message) {
    $scope.num = Message.count;
});