AngularJS入门 AngularJS控制器 AngularJS常见内置指令

AngularJS控制器 

1、控制器<controller>:

    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()方法一起使用。来进行全局数据的初始化