作用域和控制器的交互情况：
1、控制器通过作用域对模板暴露一些方法供其调用
2、控制器中定义的一些方法可改变注册在作用域下的数据模型
3、控制器在某些场合可能需设置监听器来监听作用域中的数据模型；这些监听器在控制器的相关方法被调用时立即执行
注：用 $watch 进行脏值检查时，一定不要做任何的 DOM 操作，因为 DOM 操作拖慢甚至是拖垮整体性能的能力比在 JavaScript 对象上做属性操作高好几个数量级！！
Angular 中对作用域进行脏值检查实时跟踪数据模型的变化是一个非常频繁的操作
指令分类：
监测型指令：需要在 $watch() 方法中注册一个监听处理器来监听控制器或别的操作引起的表达式值改变，进而更新视图
监听型指令：像 ng-click，这种是在 HTML 标签属性中直接写好当 ng-click 发生什么时调用什么处理器，
当 DOM 监听到1 ng-click 被触发时，这个指令就会通过 $apply() 方法执行相关的表达式操作或是别的操作更新视图
注：在编译阶段，编译器在 HTML 解析器解析页面遇到非传统的或自己不能识别的标签或别的表达式时，
Angular 编译器就将这些 HTML 不懂的东西（指令）在当前 DOM 环境下解析出来
无论哪种指令，当外部事件发生时，相关的表达式必须通过 $apply() 作用于相应的作用域，这样所有的监听器才能被正确更新，然后进行后续操作
大多数情况下，指令和作用域相互作用，但并不会创建作用域的新实例
==》但一些特殊的指令（如 ng-controller、ng-repeat 等）则会创建新的下级作用域，并把这些新建的作用域和拥有相应的 DOM 元素相关联
依赖注入（DI）：
1、含义：是一种让代码管理其依赖关系的设计模式
2、三种获取依赖对象的方式：
a、创建依赖，通常是通过 new 操作符
b、查找依赖，在一个全局的注册表中查阅它
c、传入依赖，需要此依赖的地方等待依赖对象注入进来
注：a 和 b 不理想，c 中 当 app 的某处声明需要用到某个依赖时，Angular 会调用这个依赖注入器去查找或是创建所需的依赖，然后返回回来给你使用
依赖注入的三种风格：
1、推断依赖：最简单的获取依赖的方法是让你的函数的参数名直接使用依赖名
function MyController($scope, greeter){ ... }
注：给 injector 一个函数，它可通过检查函数声明并抽取参数名可以推断需要注入的服务名，上述 $scope 和 greeter 是两个需要被注入到函数中的服务
它对压缩的 JavaScript 代码不起作用，因为压缩后会重命名函数的参数，这种风格只对 pretotyping 和 demo 级应用有用
2、$inject 注释：为了让重命名了参数的压缩版的 JavaScript 代码能够正确地注入相关依赖服务，函数需通过 $inject 属性进行标注（存放需要注入的服务的数组）
注：$inject 数组中的服务名顺序必须和函数参数名顺序一致
var myController = function (renamed$scope, renamedGreeter) { ... } myController['$inject'] = ['$scope', 'greeter'];
注：$inject 有时会导致代码膨胀（如标志指令时）
3、someModule.factory('greeter', ['$window', function(renamed$window){
...
}]);
注：最好的一种方式，千万不要将中括号外的 ‘greeter’ 和括号内的 ‘$window’ 混淆，前者是声明创建依赖，后者是注入依赖
Angular 模板：
是一个声明式的视图，它指定信息从模型、控制器变成用户在浏览器上可以看见的视图
静态的 DOM ==》动态的 DOM
1、指令：一个可扩展已有 DOM 元素或代表可复用的 DOM 组件，用可扩展属性标记
2、表达式：用双括号 {{expression}} 给元素绑定表达式
3、过滤器：格式化数据显示在界面上
4、表单控件：验证用户输入
在 Angular 中，以上元素属性可直接在模板中使用，除了在模板中声明元素外，可在 JavaScript 代码中访问这些元素
Angular 使用大的 CSS 类：
1、ng-scope：把这个类附加到所有创建了新作用域的 HTML 元素上
2、ng-binding：把这个类附加到所有通过 ng-bind 或绑定了任何数据的元素上
3、ng-invalid、ng-valid：附加到进行了验证操作的所有 input 组件元素上
4、ng-pristine、ng-dirty：angular 的 input 指令给所有新的、还未与用户交互的 input 元素附加上 ng-pristine；当用户有任何输入时，则附加上 ng-dirty
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class test</title> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <!--当无效输入时为红色，有效输入为绿色，没有输入为黄色--> <style> .ng-invalid.ng-dirty { border-color: red; } .ng-valid.ng-dirty { border-color: green; } .ng-pristine { border-color: yellow; } </style> </head> <body> <form name="myForm" ng-app="myApp" ng-controller="myCtrl" ng-submit="myForm.$valid" novalidate> <input name="myName" ng-model="name" required> <span ng-show="myForm.myName.$invalid" ng-hide="myForm.myName.$pristine || myForm.myName.$valid"> Your name must be required! </span><br> <input name="myAge" ng-model="age" type="number" max="50" min="10" required> <!--根据年龄是否有效来确定是否显示该 span--> <span ng-hide="myForm.myAge.$pristine || myForm.myAge.$valid" ng-show="myForm.myAge.$invalid"> The age range must be between 10 to 50 </span><br> <label>Hello, my name is {{name}}, I am {{age}} years old</label><br> <input type="submit" onclick="alert('submit me')" value="提交"> </form> <script> angular.module("myApp", []).controller("myCtrl", ["$scope", function ($scope) { $scope.name = "Lemon"; $scope.age = 18; }]); </script> </body> </html>