AngularJS初体验

1.简介和特点

AngularJS是Google开源的前端JS结构化框架。它可通过<script> 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML，且通过表达式绑定数据到 HTML。
特性和优点：双向数据绑定；声明式依赖注入；解耦应用逻辑，数据模型和视图；完善的页面指令；定制表单验证；Ajax封装。

2.与jQuery比较

jQuery：JS函数库；封装简化DOM操作。
angular：结构化框架；主体不再是DOM，而是页面中的动态数据。
AngularJS的应用场景：构建单页面(SPA)Web应用或Web App应用。如：
饿了吗: https://www.ele.me/home/
微信网页版: https://wx.qq.com/
知乎周报: https://zhuanlan.zhihu.com/Weekly
后台管理应用: 阿里云, 土豆后台, 唯品会…
单页面应用SPA（Single page application）：将所有的活动局限于一个页面中；有数据更新，不会更新整个页面而是局部更新(刷新)；利用 ajax 进行数据的读取。

3.Angular程序

指令：angular定义的属性、标签、样式、注释
表达式：{{表达式}}
ng-app(指令) ：告诉angular核心它管理当前标签所包含的整个区域，并且会自动创建 $rootScope 根作用域对象。
ng-model：将当前输入框的值与谁关联(属性名:属性值)，并作为当前作用域对象($rootScope)的属性。
{{}} (表达式) ：显示数据，从作用域对象的指定属性名上取。
表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算；
语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。
表达式和语句的区别：语句用分号结尾，有些语句我们没有加分号，比如console.log虽然我们没有加分号，但也是语句，因为js引擎会自动解析并且加上分号。
特例：if语句，就不用加封号，可也是完整的语句。

程序执行效果：

（1）jQuery实现：

（2）AngularJS实现：

关注微博、微信公众号搜索前端小木，让我们一起学习成长。