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

 <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>

// 对angular里面的源码进行了精简 
 $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);
 }

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

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

 // 注解的模拟
 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) {
  //通过singleton模式创建对象
  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)
     " a front-end framework by non-front-enders for non-front-enders"

3.controller通信

    在实际开发中，应用系统会非常庞大，一个应用app不可能只存在一个controller，那么不同controller之间就存在通信的可能，如何解决这个常见问题，主要有两种方法：
1.事件机制: 把事件注册在$rootScope上，这样做的问题就是会在$rootScope上注册太大事件，会引起一些列后续问题


 //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);
 })



 2.通过service: 充分利用angular的DI特性，利用service是单例的特点，在不同controller之间起到桥梁作用


// 注册service
app.service('Message', function () {
 return {
  count: void(0);
 }
 })
 // controller1,修改service的count值
app.controller('controller1', function ($scope, Message) {
  $scope.count = 1;
 Message.count = $scope.count;
});
 // controller2, 获取service的count值
app.controller('controller2', function ($scope, Message) {
$scope.num = Message.count;
 });


4.service的特点


1. 单例(singleton): angular里面只有service才可以进行DI诸如，controller、directive这些均不具有这些功能，service字面上就是提供一些基本的服务，跟具体的业务没有关联，而controller、directive则与具体业务紧密相关联，所以需要保证service的唯一性。
 2. lazy new：angular首先会生成service的provider，但是并没有立即生成对应的service，只有到需要这些服务的时候才会进行实例化操作。
3. provider)的分类: provider()、factory、service、value、constant，其中provider是最底层的实现，其他方式都是在其基础上的语法糖(sugar)，需要注意的是这些服务最终均要添加$get方法，因为具体service是通过执行$get方法生成的。 
5. directive的实现

     directive的编译(compiler)包括两个阶段: compile、link。简单来讲compile阶段主要处理template DOM，此时并不涉及作用域问题，也就是没有进行数据渲染，例如ngRepeate指令就是通过compile进行template修改的，执行compile后会返回link函数，覆盖后面定义的link函数；而link主要是进行数据渲染，分为pre-link和post-link两个环节，这两个环节解析的顺序是相反，post-link是先解析内部，然后才是外部，这样对directive的解析就是安全的，因为directive内部还可以包括directive，同时link是对真正DOM的处理，会涉及DOM操作的性能问题。

本文涉及的内容还不是很全民，之后还会有相应补充，希望大家也可以对angular框架进行学习探讨。