一、控制器的含义

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

二、控制器的作用

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

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

三、控制器的意义

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

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

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

四、控制器的一次性

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

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title>控制器演示</title>

 </head>

 <body>

     <div ng-app="myApp" ng-controller="myCtrol">

         {{ name }}

     </div>

     <script type="text/javascript" src="js/angular.js"></script>

     <script type="text/javascript">

         //定义一个名称为myApp的angular的模块对象app

         var app = angular.module('myApp',[]);

         //通过这个模块对象app创建一个控制器。后面通过数组的方式写法是避免代码压缩存在的问题。

         //（代码开始写的时候最好使用这种方式。有的人说小项目就不压缩，那小项目还用毛的angular呀，jQuery都能搞定。）

         app.controller('myCtrol',['$scope',function($scope){

             $scope.name = "cygnet";

         }]);

         //扩展知识点，其实除了装逼也没有什么卵用

         var version = angular.version;

         console.log("当前angular的主版本号：" +version.major);

         console.log("当前angular的次版本号：" +version.minor);

         console.log("当前angular的小版本号：" +version.dot);

         console.log("当前angular的代码名称：" +version.codeName);

         console.log("当前angular的版本号：" +version.full);

     </script>

 </body>

 </html>

angular之控制器（0）的更多相关文章

  1. angular开发控制器之间的通信

    一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...

  2. Angular Js 控制器

    在Angularjs中用ng-controller指令定义了应用程序中的控制器:例如: <div ng-app="myApp" ng-controller="myC ...

  3. Angular 2 从0到1 （三）

    作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:A ...

  4. angular中控制器之间的通讯方式

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

  5. angular总结控制器的三种主要职责： 为应用中的模型设置初始状态 通过$scope对象把数据模型或函数行为暴露给视图 监视模型的变化，做出相应的动作

    m1.双向数据绑定: <body> <div ng-app ng-init="user.name='world'"> <h1>使用NG实现双边数 ...

  6. angular中控制器之间传递参数的方式

    在angular中,每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其 ...

  7. angular input标签只能单向传递数据的问题

    angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...

  8. angular.js小知识总结

    angular-watch.html 代码如下: <script> var app = angular.module('app',[]); app.controller('ctrl',fu ...

  9. Angular4.0从入门到实战打造在线竞拍网站学习笔记之三--依赖注入

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 依赖注入(Dependency Injection) 正常情况下,我们写的代码应该是这样子的: let product = ne ...

随机推荐

  1. Thinking in Java——笔记(7)

    Reusing Classes The first is composition,You're simply reusing the functionality of the code, not it ...

  2. Thinking in Java——笔记(3)

    Operator Using Java operators Some operators change the value of an operand. This is called a side e ...

  3. 一些IT中的工具介绍【转】

      1. 史上最全github使用方法:github入门到精通 2. Git教程 3. GIT与GitHub使用简介 简单来说,git是一种版本控制系统.跟svn.cvs是同级的概念.github是一 ...

  4. Cocoapods配置

    这真是蛋疼的东西,配置了几次,每次都不同,每次都折腾半天.这一段时间应该不会变了,记录下来. 一 换源 看了教程都说官方源https://rubygems.org/不能访问,我特意点了一下,发现能访问 ...

  5. Objective-C objc_class 介绍

        目录(?)[-] Objective-C objc_class 介绍 NSObject objc_class isa super_class name version info instanc ...

  6. C# jquery webservices 跨域调用的问题解决方案

    前台代码: <script src="js/jquery-1.9.1.min.js" type="text/javascript"></scr ...

  7. 学习OpenCV——HOG+SVM

    #include "cv.h" #include "highgui.h" #include "stdafx.h" #include < ...

  8. 简单Hosts使用说明

    1.查找hosts文件 首先,点击桌面的"我的电脑",或者是通过开始菜单进入到我的电脑. 之后,进入到"C:\Windows\System32\drivers\etc&q ...

  9. [原创]java WEB学习笔记92：Hibernate学习之路-- -QBC 检索和本地 SQL 检索：基本的QBC 查询，带 AND 和 OR 的QBC，统计查询，排序，分页

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  10. [ubuntu]给ubuntu server安装xubuntu(xfce)窗口管理器

    1.安装基本图形 $ sudo apt-get install x-window-system-core 2.安装窗口管理器 $ sudo apt-get install xubuntu-deskto ...