没时间解释了，快上车！Angular入门第二讲:AngularJs入门之ontroller控制器。

来源：互联网发布：netflix hystrix源码编辑：程序博客网时间：2024/04/28 15:25

一、什么是ontroller控制器

    在angularJS中，controlle是一个javascript函数/类，     用于操作作用域中，各个对象的初始状态以及相应的行为。

二、ontroller控制器的作用域

    app.controller("myCtrl",function($scope){        $scope.name="离衬";    });

    如何将myCtrl控制器绑定到相应的页面中了 ，我们在body使用了 ng-controller指令，     因此整个body都成为了helloCtrl的作用范围，因此      我们可以将 {{name}}写于body的任何地方，假如我们将myCtrl放置于div中，如：

    <!DOCTYPE html>      <html   ng-app="myApp">      <head>           <meta charset="UTF-8">           <title></title>           <script src="js/angular.min.js"></script>      </head>      <body>              <p>{{name}}</p>            <div ng-controller="myCtrl">                      {{name}}              </div>      <script>            var app=angular.module("myApp",[]);            app.controller("myCtrl",function($scope){            $scope.name="离衬";              });    </script>       </body>      </html>

    如果这样编写代码，页面只会显示一个name值，不是我智障写错了，看看本章标题，当我们把 ng-controller="myCtrl"写在DIV标签时，controller的作用域就只有DIV那么大，只有在DIV这个区域调用$scope挂载的数据才能被正确引用。

三、多controller的实现

    根据上面我们知道，angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容。    因此我们可以在同一个界面上划分不同的模块，通过不同的控制器控制不同的模块来进行开发，     这样通过划分模块的开发方式，对今后维护代码带来了便利。    还是以前的例子，我们在controller.js中再写一个控制器：如

    app.controller('myCtrl', function ($scope) {          $scope.name = "离衬";      });      app.controller('worldCtrl', function ($scope) {          $scope.name="hello world";      });

    然后我们在html中绑定myCtrl ， worldCtrl

    <!DOCTYPE html>      <html   ng-app="myApp">      <head>           <meta charset="UTF-8">           <title></title>           <script src="js/angular.min.js"></script>      </head>      <body>              <p ng-controller="worldCtrl">{{name}}</p>            <div ng-controller="myCtrl">                      {{name}}              </div>      <script>            var app=angular.module("myApp",[]);            app.controller("myCtrl",function($scope){            $scope.name="离衬";              });    </script>       </body>      </html>

    这样页面就能完美的显示出两个“离衬”了，完美！！！    我们会发现，不同的controller他们scope对象是不一样的,     即使都是用了name这个变量，可以看出controller之间是封闭的，     可是有时候我们面对两个模块之间进行数据交互，必然在两个controller之间进行通信，     这就涉及到angular中的service操作，我会在下一篇文章进行记录。

0 0