AngularJS1.X学习笔记6-控制器和功效域

三、一个操纵器管多少个功能域

  自由男人给出了这么一个图

图片 1

  同理可得,将一个控制器用于多少个尚未重合不有的的HTML相当于建立了七个控制器实例,他们对应八个效用域,控制器实例之间互不相干,成效域之间也互不相干。可以做个测试看看

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>use an controller more than once</title>
</head>
<body>
    <div ng-controller='testCtrl'>
        我是一个域:<input type="text" name="" ng-model="data">
    </div>
    <div ng-controller='testCtrl'>
        我是另一个域:<input type="text" name="" ng-model="data">
    </div>



    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.controller('testCtrl',function($scope){
            $scope.data="数据"

        })
    </script>
</body>
</html>

 

  结果是在别的一个文本框输入都不会潜移默化到另一个文本框,因为他俩是相互隔离的。

二、单一控制器

  那是最简易的控制器选择格局,特点是控制器与视图一一对应,无需考虑成效域之间的通信难题。缺点是随着项目复杂度的增多或者变得难以维护。

  

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>single controller</title>
</head>
<body>
    <div ng-controller='dayCtrl'>
        <div>
            <h3>singleController</h3>
        </div>
        <h4>Today is {{day || "(不晓得)"}}</h4>
    </div>



    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.controller('dayCtrl',function($scope){
            var dayNames = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            $scope.day = dayNames[new Date().getDay()];

        })
    </script>
</body>
</html>

  经过一番辛苦出色的鏖战,我到底来临了控制器和功效域部分。控制器作为MVC的C,其重大不可谓不重大;功效域决定了你可以得到何以东西,亦是丰富主要。现在就来学习一下八个东西。去探视$apply,$watch,$broadcast是个怎么着鬼。

五、控制器的接续

  一个控制器的视图包罗另一个控制器,那么内部的控制器将屡次三番外面的控制器放到$scope上的属性和方法。

  

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>继承</title>
</head>
<body>
    <div ng-controller='fatherCtrl'>
        <div ng-controller="sonCtrl">
            <h1>{{data}}</h1>
        </div>
    </div>


    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.controller('fatherCtrl',function($scope,$rootScope){
            $scope.data = "愚人节快乐!";

        })
        .controller("sonCtrl",function(){

        });
    </script>
</body>
</html>

  sonCtrl中并不曾其余事物,可是它从fatherCtrl中继承了data属性(值为:愚人节开心!);

一、谈谈MVC

  阮一峰先生说Angular是一个叫MVVM的方式(http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html),而轻易男人说那是一个MVC框架,个人觉得都大概,目标都是分段,便于协作和保证,那几个跟大家的计算机网络的道岔思想差不离(可以参见http://www.cnblogs.com/floor/p/6649424.html)。下边仍然依据MVC的看法看看Angular。

  ThinkPHP是一个劳动端MVC框架,他的视图就是大家前端的漫天事物,控制器是从模型拿多少放到视图,或者从视图拿多少,交给模型,控制器是不直接与数据库打交道的,与数据库相关的操作就是模型的功效,大家在控制器调用M()方法就获得了一个表对应的模子。

  前端MVC则有两样,对Angular
而言,controller()方法创设的就是控制器,$scope上的东西就可以知晓为模型,他们一般是调用后端接口获得的,视图就是你见到的事物。

四、效能域通讯

  上面讲到将一个控制器用于几个视图会时有发生多少个隔离的作用域,不过有时需求有些数据可见共享,此时就相应运用$rootScope了。

  

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>use an controller more than once</title>
</head>
<body>
    <div ng-controller='testCtrl'>
        我是一个域:name:<input type="text" name="" ng-model="name"><br>
        sex:<input type="text" name="" ng-model="sex">
    </div>
    <div ng-controller='testCtrl'>
        我是一个域:name:<input type="text" name="" ng-model="name"><br>
        sex:<input type="text" name="" ng-model="sex">
    </div>



    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.controller('testCtrl',function($scope,$rootScope){
            $scope.sex="男";
            $scope.name = "大~熊";
            $scope.$watch('sex',function(){
                $rootScope.$broadcast("sexChange",$scope.sex);
            });
            $scope.$on('sexChange',function(event,args){
                $scope.sex = args;
            })

        })
    </script>
</body>
</html>

  本想着做个gif显示一下的,发现ubuntu下做个gif有点麻烦,这么些声明sex有俩个功用域共享,而name则是独享的。$rootScope可以认为是一个顶层效率域,他可以访问到其余子域,本例中,通过监听sex的生成,如若生成,则经过$rootScope发送一个sexChange事件,并将sex作为参数传进去,然后在$scope上侦听该事件,即使事件被触发,则转移$scope.sex为传进来的新值。

六、关于突显更新功效域

方法 干啥的
$apply(expression) 向作用域中应用变化
$watch(expression,hadler) expression发生变化执行handler
$watchCollection(object,handler) object任一属性变化则执行handler

 

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>updataScope</title>
</head>
<body>
    <div ng-controller='dayCtrl'>
        <h1>{{data}}</h1>
    </div>



    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",[]);
        myApp.controller('dayCtrl',function($scope){
            $scope.data = "愚人节快乐!";

            setTimeout(function () {
                $scope.$apply(function () {
                   $scope.data ="大家愚人节快乐!";
                  });
              }, 1000);
        })
    </script>
</body>
</html>

  $watch()在上面的功能域通讯已经用过了,$watchCollection()与之接近,关于那一个$apply()我还不太明白它有什么意义。有明白的同桌请指导一下。

  先写到那,过几天持续,要复习,要考试!

 

相关文章