<div ng-app="app" ng-controller="control">
  <h3 ng-repeat="content in repeatContent">ng-repeat: {{ content }}</h3>
</div>

let app = angular.module("app", []);
app.controller("control", ($scope) => {
  // 输出李滨泓
  $scope.repeatContent = ["李", "滨", "泓"];
  // 下面存在两个“泓”，会报错
  // $scope.repeatContent = ["李", "滨", "泓", "泓"];
})

let app = angular.module("app", []);

// 这里可以注入 $http 等 Provider
app.factory("Today", () => {
  let date = new Date();
  return {
    year: date.getFullYear(),
    month: date.getMonth() + 1,
    day: date.getDate()
  };
});

app.controller("control", (Today) => {
  console.log(Today.year);
  console.log(Today.month);
  console.log(Today.day);
});

let app = angular.module("app", []);

// 这里可以注入 $http 等 Provider
// 注意这里不可以使用 arrow function
// arrow function 不能作为 constructor
app.service("Today", function() {
  let date = new Date();
  this.year = date.getFullYear();
  this.month = date.getMonth() + 1;
  this.day = date.getDate();
});

app.controller("control", (Today) => {
  console.log(Today.year);
  console.log(Today.month);
  console.log(Today.day);
});

let app = angular.module("app", []);

// 这里可以注入 $http 等 Provider
// 注意这里不可以使用 arrow function
// arrow function 不能作为 constructor
app.provider("Today", function() {
  this.date = new Date();
  let self = this;

  this.setDate = (year, month, day) => {
    this.date = new Date(year, month - 1, day);
  }

  this.$get = () => {
    return {
      year: this.date.getFullYear(),
      month: this.date.getMonth() + 1,
      day: this.date.getDate()
    };
  };
});

// 这里重新配置了今天的日期是 2015年2月15日
// 注意这里注入的是 TodayProvider，使用驼峰命名来注入正确的需要配置的 provider
app.config((TodayProvider) => {
  TodayProvider.setDate(2015, 2, 15);
});

app.controller("control", (Today) => {
  console.log(Today.year);
  console.log(Today.month);
  console.log(Today.day);
});

app.config($interpolateProvider => {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

$ npm install ng-annotate-loader --save-dev

// webpack.config.js
{
  test: /\.js"color: #ff0000">五、双向数据绑定


当我们使用非 Angular 自带的事件时，$scope 里的数据改变并不会引起 $digest 的 dirty-checking 循环，这将导致当 model 改变时，view 不会同步更新，这时我们需要自己主动触发更新
HTML


<div>{{ foo }}</div>
<button id="addBtn">go</button>


JavaScript


app.controller("control", ($scope) => {
  $scope.foo = 0;
  document.getElementById("addBtn").addEventListener("click", () => {
    $scope.foo++;
  }, false);
})


很明显，示例的意图是当点击 button 时，foo 自增长并更新 View，但是实际上，$scope.foo 是改变了，但是 View 并不会刷新，这是因为 foo 并没有一个 $watch 检测变化后 $apply，最终引起 $digest，所以我们需要自己触发 $apply 或者创建一个 $watch 来触发或检测数据变化
JavaScript（使用 $apply）


app.controller("control", ($scope) => {
  $scope.foo = 0;
  document.getElementById("addBtn").addEventListener("click", () => {
    
    $scope.$apply(function() {
      $scope.foo++;
    });

  }, false);
})


JavaScript（使用 $watch & $digest）


app.controller("control", ($scope) => {
  $scope.foo = 0;
  $scope.flag = 0;

  $scope.$watch("flag", (newValue, oldValue) => {

    // 当 $digest 循环检测 flag 时，如果新旧值不一致将调用该函数
    $scope.foo = $scope.flag;
  });

  document.getElementById("addBtn").addEventListener("click", () => {
    
    $scope.flag++;
    // 主动触发 $digest 循环
    $scope.$digest();
  }, false);
})


六、$watch(watchExpression, listener, [objectEquality])
注册一个 listener 回调函数，在每次 watchExpression 的值发生改变时调用
watchExpression 在每次 $digest 执行时被调用，并返回要被检测的值（当多次输入同样的值时，watchExpression 不应该改变其自身的值，否则可能会引起多次的 $digest 循环，watchExpression 应该幂等）


listener 将在当前 watchExpression 返回值和上次的 watchExpression 返回值不一致时被调用（使用 !== 来严格地判断不一致性，而不是使用 == 来判断，不过 objectEquality == true 除外）


objectEquality 为 boolean 值，当为 true 时，将使用 angular.equals 来判断一致性，并使用 angular.copy 来保存此次的 Object 拷贝副本供给下一次的比较，这意味着复杂的对象检测将会有性能和内存上的问题


七、$apply([exp])
$apply 是 $scope 的一个函数，用于触发 $digest 循环
$apply 伪代码


function $apply(expr) {
  try {
    return $eval(expr);
  } catch (e) {
    $exceptionHandler(e);
  } finally {
    $root.$digest();
  }
}


使用 $eval(expr) 执行 expr 表达式


如果在执行过程中跑出 exception，那么执行 $exceptionHandler(e)


最后无论结果，都会执行一次 $digest 循环
总结
以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。