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
是否监控对象中第一个属性的变化。