AngularJS入门

AngularJS入门第二弹：

1、$scope的作用域：

$scope上挂载的数据，和控制器controller进行了绑定；控制器controller和网页上的DOM元素进行了绑定，网页中DOM元素的开始标签和结束标签范围，就是控制器的作用范围，也是$scope上挂载的数据的作用范围.

2.控制器：

ngularJS1.x的核心之一就是控制器部分，主要对于视图中的数据和事件处理函数进行挂载，同时进行一定的业务功能的底层封装和处理。

2.1、控制器在AngularJS中的作用

 通过$scope进行数据状态的初始化操作

 通过$scope进行事件处理函数的挂载操作

注意：不要使用控制器做下面的事情

1.DOM操作：使用AngularJS中的数据双向绑定和自定义指令执行操作

2.表单处理：使用Angular中的form controls进行操作

3.数据格式化展示：使用Angular中的过滤器Filter来进行操作

4.不同控制器之间的数据共享：使用Angular中的自定义服务Service进行处理

5.组件生命周期的操作：使用Angular中的自定义服务Service进行处理

3.全局控制器和局部控制器：

AngularJS1.2版本之前，AngularJS中定义控制器，是直接定义成window全局函数进行处理的，这样的控制器可以被所有的模块共用，称为全局控制器；这样的处理模式的优点是编写方便，处理流程清晰；缺点是容易造成变量和函数的全局污染。所以AngularJS在1.2版本之后，进行了优化调整，废弃了全局控制器，而是将控制器注册在模块中，成为模块中的局部控制器存在，局部控制器也就相当于限定了控制器的作用域范围。

4、依赖注入：

AngularJS的控制器我们有了简单的初步的认识，如果处理函数中需要添加参数依赖，在函数中直接写上依赖对应的名称即可。但是，在前端自动化构建时，部分构建工具会对函数的参数进行优化处理，造成Angular中处理函数失效的问题。

AngularJS提供了一种依赖注入的方式来解决上述问题，依赖注入是从后端语言参考的一种编程的设计模式，通过将当前代码块运行依赖的模块进行注入完成后续的处理操作。

app.controller(“myCtrl”, [“$scope”, function(s) {..}]);

上面的代码中s就被注入了$scope对象，在函数中，s就可以被当成$scope进行使用。

5、监听：

 // 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);
        })