AngularJS控制器
1、控制器<controller>:
AngularJS的核心之一就是控制器部分,主要对于视图中的数据和事件处理函数进行挂载,同时进行一定的业务功能的底层封装和处理。
AngularJS的核心之一就是控制器部分,主要对于视图中的数据和事件处理函数进行挂载,同时进行一定的业务功能的底层封装和处理。
2、控制器在AngularJS中的作用:
(1)通过$scope进行数据状态的初始化操作。
(2)通过$scope进行事件处理函数的挂载操作。
注意:不要使用控制器做下面的事情:
(1)DOM操作:使用AngularJS中的数据双向绑定和自定义指令执行操作。
(2)表单处理:使用Angular中的form controls进行操作。
(3)数据格式化展示:使用Angular中的过滤器Filter来进行操作。
(4)不同控制器之间的数据共享:使用Angular中的自定义服务Service进行处理。
(5)组件生命周期的操作:使用Angular中的自定义服务Service进行处理。
我自己对AngularJS控制器的概述:
(1) 控制器:Angular中用于进行数据逻辑处理和操作的一个模块,通过controller()函数进行注册;
(2)控制器中的参数$scope,这个参数不需要赋值,angular会自动给$scope参数传递一个数据进行使用;
(3)控制器:主要用来通过$scope挂载数据、挂载处理函数.
程序加载的顺序:
ng-app是Angular运行的入口
程序引导启动——启动项目——启动HTML页面
首先引导启动根模块——找到ng-app,加载ng-app对应的模块
引导启动模块下的控制器—— 加载模块下面的控制器
ng-app执行的过程
底层——通过bootstrap进行了引导启动@!
$scope作用域:
$scope作为控制器函数一个非常重要的参数,AngularJS通过依赖注入的方式进行自动赋值,挂载数
据完成控制器中的数据处理。每个$scope都拥有自己控制器的作用域,并且都独立于当前的控制器。
$rootScope作用域:
每一个AngularJS应用,都有唯一的一个全局作用域范围,也称为根作用域,Angular中其他的作用域都
是这个根作用域的后代/子作用域。
AngularJS的根作用域/全局作用域:$rootScope。
根作用域使用时,通过注入的方式添加到控制器处理函数的入参中。
$watch: $scope对象上,有一个$watch()函数,用于监听模型数据的变化:
//1. 监听单个普通变量
$scope.$watch("name", function() {
TODO name属性发生变化执行的函数代码
})
// 2. 监听多个变量
$scope.$watch("name + age", function() {
// TODO name或者age变量的数据发生变化执行的函数代码
})
// 3. 监听对象的数据
$scope.$watch("users.username", function() {
// TODO usres对象中的username属性一旦发生变化执行的函数代码
})
// 4. 监听对象的所有属性
$scope.$watch("users", function() {
// TODO 监听users对象的所有属性,任一属性值发生变化执行函数代码
},true)
// 5. 监听数组数据~而不监听数组中的对象数据
$scope.$watchCollection("goodses", function() {
// TODO 一旦goodses数组中的元素,被删除、添加时执行函数的代码
})
// 6. 监听数据发生变化的细节:修改前 VS 修改后
$scope.$watch("username", function(newValue, oldValue) {
console.log("数据被修改了", newValue, oldValue);
})
// 7. $watch可以重复,不会被覆盖,都会执行!
$scope.$watch("username", function(newValue, oldValue) {
console.log("data changed:", newValue, oldValue);
})
//8.$scope.$apply();// 重绘数据
多个控制器:
为了方便多个控制器中的公共数据初始化
AngularJS提供了一个全局作用域对象$rootScope
AngularJS应用中,仅有一个全局作用域,其他所有的$scope作用域都是$rootScope的子元素
使用$rootScope,可以用于初始化全局变量和函数
但是存在一个问题: 因为控制器函数中可以直接使用$rootScope,就有可能会造成全局数据污染
规范:$rootScope一般和Angular模块的run()方法一起使用。来进行全局数据的初始化