控制器的作用

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

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

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

</div>

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

•对scope对象进行初始化

•向scope对象添加方法

在模板中声明控制器

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

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

控制器的实现

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

 //控制器类定义

 var myControllerClass = function($scope){

     //模型属性定义

     $scope.text = "...";

     //模型方法定义

     $scope.do = function(){...};

 };

 //在模块中注册控制器

 angular.module('someModule',[])

 .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对象

<html ng-app="test">

<head>

    <script src="angular.js"></script>

</head>

<body>

    <div ng-controller="testController">

        <div>name : {{vm.sb.name}}</div>

        <div>gender : {{vm.sb.gender}}</div>

        <div>age : {{vm.sb.age}}</div>

        <div>career : {{vm.sb.career}}</div>

        <div><img ng-src="{{vm.sb.photo}}"></div>

    </div>

</body>

</html>
 var testControllerClass = function($scope){

     //view model

     $scope.vm = {

         sb : {

             name : "Jason Stantham",

             gender : "male",

             age : 48,

             career : "actor",

             photo : "http:1.jpg"

         }

     };

 };

 angular.module("ezstuff",[])

 .controller("testController",testControllerClass);

向scope对象添加方法

<html ng-app="test">

<head>

    <script src="angular.js"></script>

</head>

<body>

    <div ng-controller="testController">

        <button ng-click="vm.shuffle();">shuffle</button>

        <div>name : {{vm.sb.name}}</div>

        <div>gender : {{vm.sb.gender}}</div>

        <div>age : {{vm.sb.age}}</div>

        <div>career : {{vm.sb.career}}</div>

        <div><img ng-src="{{vm.sb.photo}}"></div>

    </div>

</body>

</html>
 var testControllerClass = function($scope){

     //view model

     $scope.vm = {

         sb : {

             name : "Jason Stantham",

             gender : "male",

             age : 48,

             career : "actor",

             photo : "1.jpg"

         },

         shuffle : function(){

                 var repo = [

                     {name:"Jason Stantham",gender:"male",age:48,career:"actor",photo:"2.jpg"},

                     {name:"Jessica Alba",gender:"female",age:32,career:"actress",photo:"4.jpg"},

                     {name:"Nicolas Cage",gender:"male",age:53,career:"actor",photo:"4.jpg"},

                     {name:"崔永元",gender:"male",age:48,career:"independent journalist",photo:"5.jpg"}];

                 var idx = Math.floor(Math.random()*repo.length);

                 $scope.vm.sb = repo[idx];

         }

     };

 };

 angular.module("test",[])

 .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. ubuntu下MySQL安装配置及基本操作

    在linux下安装方法: 分为四种:一: 直接用软件仓库自动安装(如:ubuntu下,sudo apt-get install mysql-server; Debain下用yum安装): 二:官网下载 ...

  2. "类名.this"与"this"的区别

    "this"是指(或者说:所代表的是)当前这段代码所在的类的对象.而"类名.this"是指"类名"的对象(一般在匿名类或内部类中使用来调用外 ...

  3. 【二分】Codeforces 706B Interesting drink

    题目链接: http://codeforces.com/problemset/problem/706/B 题目大意: n (1 ≤ n ≤ 100 000)个商店卖一个东西,每个商店的价格Ai,你有m ...

  4. 【动态规划】XMU 1028 Game Boy Advance

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1028 题目大意: 求01背包最优解的方案.物件数和物件编号. 题目思路: [动态规划] ...

  5. Stm32 定时器 定时时间设置及PWM频率 占空比的设置总结

    一.定时器的时钟: 当SYSCLK等于72M,APB1等于36M APB2等于72M时,定时器的时钟为72M.注意图中这句话:如果APB1/APB2预分频器=1则频率不变,否则频率x2.如果此时,AP ...

  6. C#.net实现密码加密算法

    //SHA-1算法string password = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFil ...

  7. 一个简单的TestNG例子

    关于TestNG好的资源: 官网文档:http://testng.org/doc/documentation-main.html 一 下载并安装:1. JDK 1.7 $ java -version ...

  8. Linux 上使用 Gmail SMTP 服务器发送邮件通知

    导读 假定你想配置一个 Linux 应用,用于从你的服务器或桌面客户端发送邮件信息.邮件信息可能是邮件简报.状态更新(如 Cachet).监控警报(如 Monit).磁盘时间(如 RAID mdadm ...

  9. [置顶] 软件架构师的12项修炼_读书纪要_P3商务技能修炼

    本系列的文章是我读书后的个人纪要(书摘),仅代表个人观点.如想了解更多相关内容,请购买正版物,支持原书作者.对应的图书可以从我的个人图书列表里找寻:个人毕业后图书列表 本书勾勒了软件架构师的必备技能的 ...

  10. Java程序员可能犯的3个常见SQL错误

    概述:Java程序员不仅要具备扎实的Java编程能力,在日常的工作当中往往还要涉及到其他语言的基础知识,尤其是SQL.那么哪些常见的SQL错误是程序员们容易犯的呢?让我们一起来看看吧! 你可能看到Ja ...