AngularJS很重要的一个特性就是实现模块化编程,我们可以通过以下方式创建一个模块,对页面进行功能业务上的划分
// 创建一个名字叫MyApp的模块,第二个参数指的是该模块依赖那些模块
var app = angular.module(“MyApp”, []);//app是MyApp模块的实例
也可以将重复使用的指令或过滤器之类的做成模块便于复用
注意必须指定第二个参数,[]是个空数组,表示不需要其他模块。
Module.controller() 控制器
var app = angular.module(“myApp”, []); //myApp模块名 app是模块实例
app.controller(“userCtrl” ,function($scope){
//userCtrl是控制器的名字
$scope.name= “赵敏”; //$scope用来保存数据,定义方法
});
第二行代码创建了一个名为userCtrl的控制器,以及一个控制器函数
控制器函数接受一个名为$scope的参数
Controller 控制器
控制器的三种主要职责:
- 为应用中的模型设置初始状态,初始化$scope对象
- 通过$scope对象把数据模型或函数行为暴露给视图
- 使用$watch方法监视模型的变化,做出相应的动作
// 监视购物车内容变化,计算最新结果
$scope.$watch(‘totalCart’, calculateDiscount);
$scope(上下文模型)
- 视图和控制器之间的桥梁
- 用于在视图和控制器之间传递数据
- 利用$scope暴露数据模型(数据,行为)
单向绑定和双向绑定
单向绑定:
- 模型变化过后,自动同步到界面上;
- 一般纯展示型的数据会用到单项数据绑定;
- 使用表达式的方式都是单向的
双向绑定: - 两个方向的数据自动同步:
- 模型发生变化自动同步到视图上;
- 视图上的数据发生变化过后自动同步到模型上;
本文介绍了AngularJS中的模块化编程,强调了Module.controller()创建控制器的方法,并详细阐述了控制器的三大职责,如初始化$scope对象、数据模型的双向与单向绑定。$scope作为视图和控制器间的桥梁,用于数据传递。同时,文章讨论了单向和双向数据绑定的使用场景和区别。
1万+

被折叠的 条评论
为什么被折叠?



