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

最新推荐文章于 2024-07-15 14:11:16 发布

离衬

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量452

点赞数 1

分类专栏： angularjs angularjs高级程序设计文章标签： angular angularjs 函数 javascript

本文链接：https://blog.csdn.net/qq_35488534/article/details/70879761

版权

angularjs 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

angularjs高级程序设计

3 篇文章 0 订阅

订阅专栏

一、什么是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操作，我会在下一篇文章进行记录。

离衬

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
没时间解释了，快上车！Angular入门第二讲:AngularJs入门之ontroller控制器。

一、什么是ontroller控制器在angularJS中，controlle是一个javascript函数/类，用于操作作用域中，各个对象的初始状态以及相应的行为。二、ontroller控制器的作用域 app.controller("myCtrl",function($scope){ $scope.name="离衬"; }); 如何将myCt
复制链接

扫一扫