AngularJSAngularJS1.X学习笔记6-控制器和作用域

  经过一番辛苦的激战,我竟赶到了控制器和作用域部分。控制器作为MVC的C,其重要性不可谓无重要;作用域决定了若可以用到怎样东西,亦是异常重要。现在就是来学习一下点滴只东西。去探视$apply,$watch,$broadcast是个什么坏。

一、谈谈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上的物就可以领略吧模型,他们一般是调用后端接口拿到的,视图就是公见到底东西。

第二、单一控制器

  这是太简单易行的控制器采用形式,特点是控制器和视图一一对应,无需考虑作用域之间的通信问题。缺点是趁项目复杂度的增加或移得难以保障。

  

<!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>

其三、一个控制器管几单作用域

  自由男人让出了如此一个图

AngularJS 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>

 

  结果是在外一个文本框输入还非会见潜移默化到其他一个文本框,因为她俩是相互隔离的。

季、作用域通信

  上面讲到以一个控制器用于几只视图会发生几独隔离的作用域,但是有时需要一些数码会共享,此时就算应当利用$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为污染上的新值。

五、控制器的累

  一个控制器的视图包含其他一个控制器,那么中的控制器将继续外面的控制器放到$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属性(值也:愚人节快乐!);

六、关于显示更新作用域

方法 干啥的
$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()我还非太明了她产生哪里打算。有解的同班要点一下。

  先勾勒到及时,过几龙持续,要复习,要考试!

 

相关文章