(七)Angularjs - 控制器
控制器的作用
没有控制器/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 - 控制器的更多相关文章
- AngularJS控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据,控制器是常规的 JavaScript 对象. 1. angular.module(name, [requires], [confi ...
- AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制 ...
- Unity手游之路<七>角色控制器
Unity手游之路<七>角色控制器 我们要控制角色的移动,可以全部细节都由自己来实现.控制角色模型的移动,同时移动摄影机,改变视角.当然Unity也提供了一些组件,可以让我们做更少的工作, ...
- AngularJS 控制器 ng-controller
AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 应用程序被控制器控制. ng-contro ...
- angularjs控制器之间通信,事件通知服务
service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...
- AngularJS学习之旅—AngularJS 控制器(六)
1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...
- AngularJS 1.x系列:AngularJS控制器(3)
1. 控制器(Controller)定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ...
- AngularJS控制器和AngularJS过滤器的学习(3)
前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...
- AngularJS 控制器的方法
AngularJS 控制器也有方法(变量和函数) <!DOCTYPE html><html><head><meta http-equiv="Cont ...
- 【06】AngularJS 控制器
AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 Ang ...
随机推荐
- HIVE json格式数据的处理
今天要处理一个以json格式存储的数据,想要直接把json的各个项的数据存入HIVE表中. HIVE直接读入json的函数有两个: (1)get_json_object(string json_str ...
- poj 3308 Paratroopers
http://poj.org/problem?id=3308 #include <cstdio> #include <cstring> #include <algorit ...
- C51 库函数(3)
3.3 STRING.H:串函数 串函数通常将指针串作输入值.一个串就包括2个或多个字符.串结以空字符表示.在函数memcmp,memcpy,memchr,memccpy,memmove和memset ...
- 调用系统API还是很高效的,不必担心性能
代码如下: void MainWindow::on_pushButton_2_clicked() { QTime total; total.start(); ; ; i<=*; i++) { Q ...
- 2014年基于Raspberry Pi的5大项目
2014年基于Raspberry Pi的5大项目 Raspberry Pi(即树莓派)是一款基于Linux系统(Debian.ArchLinux)的单板机计算机,它只有一张信用卡大小,可用于电子表 ...
- bzoj3574[Hnoi2014]抄卡组
http://www.lydsy.com/JudgeOnline/problem.php?id=3574 我们发现如果所有的字符串都有*,那么只需要比较他们的“前缀”和“后缀”相同即可.“前缀”指第一 ...
- Types of AOP
There are two distinct types of AOP: static and dynamic. The difference between them is really the p ...
- java中Object相关的几个方法
protected Object clone()创建并返回此对象的一个副本. String toString()返回该对象的字符串表示. boolean equals(Object obj)指 ...
- java笔记10之循环
关于for 循环语句:for循环,while循环,do...while循环. for循环格式: for(初始化语句;判断条件语句;控制条件语句) { ...
- Jquery 的bind(), live(), delegate(), on()绑定事件方式
1. 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅. bind() 适 ...