控制器的作用

没有控制器/controller，我们没有地方定义业务模型

比如：ng-init指令。我们可以使用ng-init指令在scope对象上定义数据

  1. <div ng-init="sb={name:'somebody',gender:'male',age:28}">
  2. </div>

控制器让我们有机会在scope上定义我们的业务逻辑，具体说，可以使用控制器：

•对scope对象进行初始化

•向scope对象添加方法

在模板中声明控制器

在一个HTML元素上使用ng-controller指令，就可以引入一个控制器对象：

  1. <div ng-controller="myController">...</div>

控制器的实现

控制器实际上就是一个JavaScript的类/构造函数：

  1.  //控制器类定义
  2.  var myControllerClass = function($scope){
  3.      //模型属性定义
  4.      $scope.text = "...";
  5.      //模型方法定义
  6.      $scope.do = function(){...};
  7.  };
  8.  //在模块中注册控制器
  9.  angular.module('someModule',[])
  10.  .controller("myController",myControllerClass);

控制器对scope的作用

注意：ng-controller指令总是创建一个新的scope对象：

流程：

•ng-app指令引发$rootScope对象的创建。开始时，它是一个空对象。

•body元素对应的scope对象还是$rootScope。ng-init指令将sb对象挂在了$rootScope上。

•div元素通过ng-controller指令创建了一个新的scope对象，这个对象的原型是$rootScope。

•因为原型继承的关系，在do函数中对sb的引用指向$rootScope.sb。

初始化$scope对象

  1. <html ng-app="test">
  2. <head>
  3.     <script src="angular.js"></script>
  4. </head>
  5. <body>
  6.     <div ng-controller="testController">
  7.         <div>name : {{vm.sb.name}}</div>
  8.         <div>gender : {{vm.sb.gender}}</div>
  9.         <div>age : {{vm.sb.age}}</div>
  10.         <div>career : {{vm.sb.career}}</div>
  11.         <div><img ng-src="{{vm.sb.photo}}"></div>
  12.     </div>
  13. </body>
  14. </html>
  1.  var testControllerClass = function($scope){
  2.      //view model
  3.      $scope.vm = {
  4.          sb : {
  5.              name : "Jason Stantham",
  6.              gender : "male",
  7.              age : 48,
  8.              career : "actor",
  9.              photo : "http:1.jpg"
  10.          }
  11.      };
  12.  };
  13.  angular.module("ezstuff",[])
  14.  .controller("testController",testControllerClass);

向scope对象添加方法

  1. <html ng-app="test">
  2. <head>
  3.     <script src="angular.js"></script>
  4. </head>
  5. <body>
  6.     <div ng-controller="testController">
  7.         <button ng-click="vm.shuffle();">shuffle</button>
  8.         <div>name : {{vm.sb.name}}</div>
  9.         <div>gender : {{vm.sb.gender}}</div>
  10.         <div>age : {{vm.sb.age}}</div>
  11.         <div>career : {{vm.sb.career}}</div>
  12.         <div><img ng-src="{{vm.sb.photo}}"></div>
  13.     </div>
  14. </body>
  15. </html>
  1.  var testControllerClass = function($scope){
  2.      //view model
  3.      $scope.vm = {
  4.          sb : {
  5.              name : "Jason Stantham",
  6.              gender : "male",
  7.              age : 48,
  8.              career : "actor",
  9.              photo : "1.jpg"
  10.          },
  11.          shuffle : function(){
  12.                  var repo = [
  13.                      {name:"Jason Stantham",gender:"male",age:48,career:"actor",photo:"2.jpg"},
  14.                      {name:"Jessica Alba",gender:"female",age:32,career:"actress",photo:"4.jpg"},
  15.                      {name:"Nicolas Cage",gender:"male",age:53,career:"actor",photo:"4.jpg"},
  16.                      {name:"崔永元",gender:"male",age:48,career:"independent journalist",photo:"5.jpg"}];
  17.                  var idx = Math.floor(Math.random()*repo.length);
  18.                  $scope.vm.sb = repo[idx];
  19.          }
  20.      };
  21.  };
  22.  angular.module("test",[])
  23.  .controller("testController",testControllerClass );

控制器不要以下操作

•DOM操作：应当将DOM操作使用指令/directive进行封装。

•变换输出形式：应当使用过滤器/filter对输出显示进行转化。

•跨控制器共享代码：对于需要复用的基础代码，应当使用服务/service进行封装

（七）Angularjs - 控制器的更多相关文章

  1. AngularJS控制器

    AngularJS 控制器 控制 AngularJS 应用程序的数据,控制器是常规的 JavaScript 对象. 1. angular.module(name, [requires], [confi ...

  2. AngularJS 控制器

    AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制 ...

  3. Unity手游之路<七>角色控制器

    Unity手游之路<七>角色控制器 我们要控制角色的移动,可以全部细节都由自己来实现.控制角色模型的移动,同时移动摄影机,改变视角.当然Unity也提供了一些组件,可以让我们做更少的工作, ...

  4. AngularJS 控制器 ng-controller

    AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 应用程序被控制器控制. ng-contro ...

  5. angularjs控制器之间通信，事件通知服务

    service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...

  6. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  7. AngularJS 1.x系列：AngularJS控制器（3）

    1. 控制器(Controller)定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ...

  8. AngularJS控制器和AngularJS过滤器的学习（3）

    前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...

  9. AngularJS 控制器的方法

    AngularJS 控制器也有方法(变量和函数) <!DOCTYPE html><html><head><meta http-equiv="Cont ...

  10. 【06】AngularJS 控制器

    AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 Ang ...

随机推荐

  1. Net Core 项目实战之权限管理系统（0）

    0 前言 Net Core 项目实战之权限管理系统(0) 无中生有   0 http://www.cnblogs.com/fonour/p/5848933.html 学习的最好方法就是动手去做,这里以 ...

  2. 转：CodeCube提供可共享、可运行的代码示例

    CodeCube是一个新服务和开源项目,旨在让开发者能够通过浏览器以一种安全的方式分享并运行代码示例从而提升协作. 最初发布的服务可以从codecube.io上获取,支持Ruby.Python.Go及 ...

  3. GFF 和 OGS 这两种触摸屏谁更好？

    我将从成本分析.制程分析.用户体验三个方面来回答楼主的问题.GFF的触摸屏从字面上翻译过来,就是一层玻璃cover,两层film构成的触摸屏.其中,玻璃cover作为整个手机的coverlens,从外 ...

  4. Android 正则表达式验证手机和邮箱格式是否正确

    demo例子: package it.com.cc; import java.util.regex.Matcher; import java.util.regex.Pattern; import an ...

  5. js中数字计算精度

    其实同样的问题在java中也有存在,同样是浮点数的问题 问题这样的: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一 ...

  6. 【动态规划】XMU 1029 矩阵链乘法

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1029 题目大意: 题同乘法难题.给n+1个数,头尾不能动,中间的数可取出,取出时代价是 ...

  7. 微软 Microsoft

    微软(Microsoft Corporation) (NASDAQ:MSFT,港交所:4338),是一家基于美国的跨国电脑科技公司,是世界PC(Personal Computer,个人计算机)机软件开 ...

  8. HDU5409---CRB and Graph 2015多校 双联通分量缩点

    题意:一个联通的无向图, 对于每一条边, 若删除该边后存在两点不可达,则输出这两个点, 如果存在多个则输出第一个点尽可能大,第二个点尽可能小的. 不存在输出0 0 首先 若删除某一条边后存在多个联通分 ...

  9. Java语言与JVM中的Lambda表达式全解

    Lambda表达式是自Java SE 5引入泛型以来最重大的Java语言新特性,本文是2012年度最后一期Java Magazine中的一篇文章,它介绍了Lamdba的设计初衷,应用场景与基本语法. ...

  10. C# asp.net页面通过URL参数传值中文乱码问题解决办法

    1.编码string state=Server.UrlEncode(stateName.Text.Trim());Response.Redirect("aaa.aspx?state=&quo ...