AngularJS开发下一代Web应用_Angular应用程序剖析(2)

一、启用Angular
     Angular的应用程序：
          1.  加载angular.js库
          2.  使用ng-app指令来告诉Angular它应该管理哪部分DOM

     小技巧：我们在加载Angular.js脚本时，可以使用CDN上载入，这样，你的用户有多个应用 程序使用Angular，那么他将只需要下载脚本一次。
    
     使用ng-app声明Angular的界限，在创建一个完全的Angular应用程序时，应该在Dom标签中包含ng-app.
    
二、模板和数据绑定
     在Angular应用程序中模板是 HTML 文档，整个UI组件使用标准的HTML加Angular指令来定义。进入浏览器中，Angular就会在你的整个应用程序中合并模板和数据来渲染页面。
    
     在应用程序程序中，连接你的服务器获取用户请求的资源，然后Angular将它[请求的数据]与你的模板合并.
    
     基本的动作流程看起来像是这样的：
     1.用户请求页面，浏览器发HTTP请求连接服务器，加载包含模板和一部分数据的HTML页面。
     2.Angular载入，页面加载，查询指令和绑定，触发事件监听器和DOM操作，获取初始数据，展示应用程序把模板DOM和数据转换为视图。
     3.连接你的服务器，加载其他数据以及和用户交互中需要的数据。
    
 三、显示文本：
     两种方式 <p>{{greeting}}</p>     <p ng-bind="greeting"><p> 这两者的输出是等价的. 如果greeting变量设置为一个字符串，将会绑定为该字符串。两者的区别，第一种在Angular加载之前可能会显示未加载的模板，第二种则不会。
    
四、表单输入：
     也可以使用ng-model属性绑定到你的表单元素上，文本输入框，单选，复选等。
    
五、事件触发响应：
     使用ng-change属性来指定一个控制器方法，用户改变值时，这个控制器方法都被调用。
     ng-submit 指令也会自动阻止浏览器处理其默认的PGet行为.
     ng-click 触发单击的函数
     ng-dblclick触发双击的函数。
    
     最有用可能就是Angular指令, ng-repeat对于集合中的每一项都创建一次一组元素的一份副本.你应该在你想创建列表问题的任何地方使用它
    
六、 隐藏与显示：ng-show     ng-hide
    
七、 CSS类和样式:
     在应用程序中通过使用{{}}插值空号绑定数据的方式设置类的样式，也可以在应用程序中组成匹配的类名。
     使用Angular提供的ng-class和ng-style指令。
     使用方式
　　  一个使用空格分割类名的字符串
　　  一个类名数组
　　  类名到布尔值的映射

八、src和href属性注意事项：
     在浏览器图片和与其他内容是并行加载，所以在img标签src中不能拼接，你应该使用ng-src属性来编写你的模板。
     <img ng-src="/images/cats/{{favoriteCat}}">
     <a ng-href="/shop/category={{numberOfBalloons}}">some text</a>
    
九、表达式
     在Angular中指令值可以处理简单的数学运算(+, -, /, *, %), 进行比较(==, !=, >, <, >=, <=), 执行布尔逻辑运算(&&, !!, !)以及按位运算(^, &, |). 你可以调用暴露在控制器的$scope对象上的函数, 你还可以引用数据和对象表示法([],{}, …).
     在模板中尽管可以使用表达式，但是应该避免这种方式. 保持视图和控制器之间的职责分离可以确保它们容易理解和测试
    
十、分离用户界面(UI)和控制器职责
     在你的应用程序中控制器有三个职责:
       在你的应用程序的模型中设置初试状态.[初始化应用程序]
       通过$scope暴露模型和函数到视图中.
       监控模型的改变并触发行为.
    
十一、 使用$watch监控模型变化
     $watch(watchFn, watchAction, deepWatch);
     watchFn
这个参数是一个Angular字符串表达式或者是一个返回你所希望监控的模型当前值的函数.
     watchAction
这是watchFn发生变化时会被调用的函数或者表达式. 在函数形式中, 它接受watchFn的新值, 旧值以及作用域的引用.其签名就是function(newValue, oldValue,scope).
     deepWatch
是否监控对象中第一个属性的变化。