Angular学习-controller

来源：互联网发布：idm for mac 破解编辑：程序博客网时间：2024/05/29 14:23

Angular的控制器(controller)

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

1.控制器在AngularJS中的作用

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

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

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

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

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

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

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

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

$scope作为控制器函数一个非常重要的参数，AngularJS通过依赖注入的方式进行自动赋值，

挂载数据完成控制器中的数据处理。每个$scope都拥有自己控制器的作用域，并且都独立于当前的控制器。

$scope上挂载的数据，和控制器controller进行了绑定；控制器controller和网页上的DOM元素进行了绑定，

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

          目前常规控制器的做法：             先声明模块                模块下挂载控制器>>> 控制器的作用范围仅限于当前模块！>>>局部控制器          Angular1.2版本以前            控制器的定义，是直接通过全局函数来实现的            //控制器：全局控制器            function ctrl($scope) {                $scope.name = "tom";//挂载数据            }            全局控制器的意思，是可以在网页中任意地方通过ng-controller进行注册            全局控制器造成了全局数据污染~！所以Angular在1.2版本以后进行了彻底修改            废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器！来更好的控制数据！    <script src="js/lib/AngularJS/angular.min.js"></script><body>    <!-- name被Angular解释为变量，'tom'被解释为变量值 -->    <!-- name2被Angular解释为变量，n2被解释为变量-->    <div ng-init="name='tom';name2=n2">        {{name}}**{{name2}}        <div>greeting: <span ng-bind="greeting"></span></div>    </div>    <!-- 控制器 -->    <div ng-app="myApp">        <div ng-controller="myCtrl">            <div>局部控制器范围：<span ng-bind="greeting"></span></div>        </div>        <div ng-controller="myCtrl2">            <div>局部控制器范围：<span ng-bind="greeting"></span></div>        </div>    </div>    <div id="myApp2">        <div ng-controller="myApp2Ctrl">            <div>局部控制器App2范围：<span ng-bind="hello"></span></div>        </div>        <div ng-controller="myCtrl2">            <div>局部控制器范围：<span ng-bind="greeting"></span></div>        </div>    </div>    <script>        var app = angular.module("myApp", []);        app.controller("myCtrl" , ["$scope", function($scope){            $scope.greeting = "hello ng-app!"        }]);        app.controller("myCtrl2" , ["$scope", function($scope){            $scope.greeting = "hello ng-app!"        }]);        var app2 = angular.module("myApp2", []);        app2.controller("myApp2Ctrl", ["$scope",function($scope) {            $scope.hello = "my app2 ctrl value!";        }]);        var _mp2 = document.getElementById("myApp2");        angular.bootstrap(_mp2, ["myApp2"]);    </script>

0 0