zoukankan      html  css  js  c++  java
  • angular之控制器(0)

    一、控制器的含义

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

    二、控制器的作用

    1. 控制 AngularJS 应用程序的数据

    2.对$scope对象进行初始化(可以理解为每个控制器都对应一个$scope,每个控制器里面的$scope都是互相封闭的,互不影响。。除了嵌套控制器。留在以后讲$scope的作用域)

    三、控制器的意义

    通过控制器实现代码的业务逻辑代码。

    注意:控制器的设计出发点是封装单个视图的业务逻辑,因此,不要进行以下操作:

    • DOM操作    应当将DOM操作使用指令/directive进行封装。
    • 变换输出形式   应当使用过滤器/filter对输出显示进行转化。
    • 跨控制器共享代码   对于需要复用的基础代码,应当使用服务/service进行封装

    四、控制器的一次性

    控制器仅在AngularJS对HTML文档进行编译时被执行一次。从这个角度看, 就更容易理解为何将控制器称为对scope对象的增强:一旦控制器创建完毕,就意味着scope对象上的业务模型构造完毕,此后就不再需要控制器了- scope对象接管了一切。

    ps:理论是为了更好的理解代码。而不是纯粹的光看。多说无益,亮代码吧!

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8" />
     5     <title>控制器演示</title>
     6 </head>
     7 <body>
     8     <div ng-app="myApp" ng-controller="myCtrol">
     9         {{ name }}
    10     </div>
    11     <script type="text/javascript" src="js/angular.js"></script>
    12     <script type="text/javascript">
    13         //定义一个名称为myApp的angular的模块对象app
    14         var app = angular.module('myApp',[]);
    15         //通过这个模块对象app创建一个控制器。后面通过数组的方式写法是避免代码压缩存在的问题。
    16         //(代码开始写的时候最好使用这种方式。有的人说小项目就不压缩,那小项目还用毛的angular呀,jQuery都能搞定。)
    17         app.controller('myCtrol',['$scope',function($scope){
    18             $scope.name = "cygnet";
    19         }]);
    20 
    21         //扩展知识点,其实除了装逼也没有什么卵用
    22         var version = angular.version;
    23         console.log("当前angular的主版本号:" +version.major);
    24         console.log("当前angular的次版本号:" +version.minor);
    25         console.log("当前angular的小版本号:" +version.dot);
    26         console.log("当前angular的代码名称:" +version.codeName);
    27         console.log("当前angular的版本号:" +version.full);
    28     </script>
    29 </body>
    30 </html>
  • 相关阅读:
    HDU 2116 Has the sum exceeded
    HDU 1233 还是畅通工程
    HDU 1234 开门人和关门人
    HDU 1283 最简单的计算机
    HDU 2552 三足鼎立
    HDU 1202 The calculation of GPA
    HDU 1248 寒冰王座
    HDU 1863 畅通工程
    HDU 1879 继续畅通工程
    颜色对话框CColorDialog,字体对话框CFontDialog使用实例
  • 原文地址:https://www.cnblogs.com/cygnet/p/5940310.html
Copyright © 2011-2022 走看看