AngularJS是协助搭建单页面工程的开源前端框架。它通过MVC模式使得开发与测试变得更容易
核心思想为
- 使用MVC设计模式
- 双向数据绑定
- 依赖注入
- 采用模块化设计
案例
- AngularJS双向数据绑定
结果
可以通过Model双向绑定view视图数据 - AngularJS基于模块化的MVC
结果
注意
controller控制器 :JS代码
model模型：name属性
view :{{}} 视图显示
$scope使用依赖注入，将当前作用域注入到控制器中进行操作
遵循MVC模式开发，鼓励视图、数据、逻辑组件间松耦合 - AngularJS 事件绑定
在按钮处设置一个清空name的Val事件，绑定点击事件 - AngularJS 集合数据遍历显示
结果
利用ngRepeat可以遍历集合数据 - 通过AngularJs的路由来控制页面的显示
什么是路由
当我们访问一个URL地址时，经常会出现头部与尾部信息是不需要改变的，需要跳转的是body显示的信息，AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 因为 #! 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 #! 号后面内容的功能实现。 AngularJS 路由就通过 #! + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上
总结
- ng-app：AngularJS程序入口，对该标签内的元素进行初始化。
- ng-controller：在当前元素范围内绑定指定的控制器(controller)。
- ng-model：指定当前元素与数据模型（$scope）中的属性绑定，如果数据模型中没有此属性，会自动新建一个。
- ng-repeat：循环$scope中的属性，类似于{{#each beans}}
- {{xxx}}：花括号表示读取某一属性值，可以等于ng-bind