AngularJS讲义-控制器
在Angular中,控制器(Controller)就是基于JavaScript的构造方法,主要用来构造模型并建立模型和视图之间的数据绑定。控制器里面定义了应用程序的逻辑和行为。
通过ng-controller指令可以将控制器和DOM绑定起来。Angular会用定义过的控制器构造函数实例化一个控制器对象,在Angular应用(module)启动的时候,会创建一个根作用域, Angular实例化每个控制器时会创建一个新的子作用域并作为可注入参数($scope)注入到控制器的构造方法中.
在理解控制器作用的基础上,我们应当按照约定使用控制器:
1. 初始化$scope.
2. 在$scope中增加应用的行为。
尽量避免在如下场景中使用控制器:
1.操作DOM - 控制器主要包含业务逻辑。 把视图逻辑放到控制器中会严重影响代码的可测试性。Angular已经将绝大部分侦听器和DOM操作逻辑加以封装在数据绑定和指令(directives)中。
2. 格式化输入 - 尽量用angular form controls取代。
3. 格式化或者过滤输出 - 考虑使用Angular的过滤器(filters).
4. 实现共享代码片段,或者管理多个控制器之间的状态 - 考虑使用service组件来管理
5. 管理其他组件的生命周期(例如创建service组件实例)
初始化$scope对象的状态
但创建一个应用时,我们通常需要通过设置$scope的属性来初始化Angular $scope的状态。 这些属性(properties)包含了视图模型。$scope的属性在控制器所绑定的DOM范围内的模板(template)是可见的。
例如:
1 var myApp = angular.module('myApp',[]);
2 myApp.controller('GreetingController', ['$scope', function($scope) {
3 $scope.greeting = 'Hola!';
4 }]);
这里创建了一个'myApp'的应用模块,并定义了‘GreetingController’控制器,接下来我们通过ng-controller指令将控制器绑定到相应的div上:
<div ng-controller="GreetingController">
{{ greeting }}
</div>
这样我们就可以通过{{greeting}}表达式得到greeting属性的值。
给Scope对象赋予行为
我们可以给scope对象添加方法,这样就可以在绑定的视图或者模板中调用这些方法来响应事件或者执行一些计算任务. 让我们看下面的例子:
这段JS代码中,我们给scope添加了double方法,然后我们将控制器添加到DOM中:
这样我们就可通过表达式调用scope的double方法。正如我们在基本概念一节中讲述的, 定义在scope中的属性可以作为模型数据被绑定,同时定义在scope中的方法也可以被表达式或者ng事件指令调用,例如ngClick.
正确使用控制器
简言之,控制器中一般只包含视图相关的业务逻辑. 我们可以和视图无关的代码及公用代码封装在service中,通过在构造器中注入依赖的方式来使用services. 我们将会在稍后的章节中详解依赖注入机制.
关联控制器和Scope对象
我们可以通过ngController指令和$route service来关联控制器和Scope对象.
接下来我们通过代码范例帮助大家更好地理解Angular控制器的工作原理。我们将创建一个简单的app包含三个部分:
1. 一个模板(template) 包含了一个消息和两个按钮。
2. 一个模型(Model)包含一个名叫spice的属性。
3. 一个控制器包含了两个方法设置spice的值。
template code (index.html)
app.js(定义了控制器)
我们可以看到,模板中的消息通过表达式绑定到spice属性,spice被初始化为"very", 随后我们有通过ng-click绑定了scope中的两个方法,分别修改了spice的值, 但我们点击按钮时,消息会被自动刷新。
初始化页面:
点击Chili后, 消息自动更新:
让我们总结一下以上实例:
1. Angular通过ng-controller隐式的给模板创建了一个作用域(scope),这个作用域被SpicyController扩充。
2. SpicyController是一个普通的JavaScript函数。通常Controller名字首字母大写,以Controller为后缀。
3. 通过给$scope里面的属性赋值来创建或者更新模型。
4. Controller的方法可以直接定义为$scope的方法。
5. 可以在与控制器关联的<div>以及子元素中通过模板中的表达式以及ng事件指令访问控制器的方法和属性。
实例 二:为控制器方法添加参数, 参数可以引用model
<div ng-controller="SpicyController">
<input ng-model="customSpice">
<button ng-click="spicy('chili')">Chili</button>
<button ng-click="spicy(customSpice)">Custom spice</button>
<p>The food is {{spice}} spicy!</p>
</div>
1 var myApp = angular.module('spicyApp2', []);
3 myApp.controller('SpicyController', ['$scope', function($scope) {
4 $scope.customSpice = "wasabi";
5 $scope.spice = 'very';
7 $scope.spicy = function(spice) {
8 $scope.spice = spice;
9 };
10 }]);
11
在这个例子中我们注意到ng-click绑定的方法中添加了参数, 参数为模型spice的值, 同时输入文本框也绑定到spice属性,但在输入文本框里面键入spice的值,点击‘Custom Spice’ 按钮, message中spiced的值会被替换成文本框中的值。
实例三: 作用域的继承关系
我们可以把控制器关联到不同的DOM层级。由于ng-controller指令会自动创建子作用域,所以作用域也有相应的层级关系。子作用域中可访问上级作用域中的属性和方法,上级作用域的同名属性和方法将被子作用域隐藏。 让我们结合代码来理解:
index.html
app.css
div.spicy div { padding: 10px; border: solid 2px blue; }
app.js
1 var myApp = angular.module('scopeInheritance', []);
2 myApp.controller('MainController', ['$scope', function($scope) {
3 $scope.timeOfDay = 'morning';
4 $scope.name = 'Nikki';
5 }]);
6 myApp.controller('ChildController', ['$scope', function($scope) {
7 $scope.name = 'Mattie';
8 }]);
9 myApp.controller('GrandChildController', ['$scope', function($scope) {
10 $scope.timeOfDay = 'evening';
11 $scope.name = 'Gingerbread Baby';
12 }]);
运行结果:
我们注意到这里我们实现了三个控制器: MainController, ChildController, GrandChildController,并在不同级的div中被关联,Angular将产生四个作用域:
1. root scope即根作用域
2. MainController的作用域, 包括了timeOfDay和name属性。
3. ChildController的作用域, 继承了MainController的timeOfDay属性,覆盖了MainController的name属性。
4. GrandChildController的作用域,分别从MainController作用域继承了timeOfDay属性, 覆盖了上一层作用域的name属性。
作用域中的方法原理同上, 这里就不一一详解。
AngularJS讲义-控制器的更多相关文章
- AngularJs开发——控制器间的通信
AngularJs开发——控制器间的通信 指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制 ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- angularjs 嵌套控制器,子控制器访问父控制器
<pre> http://www.lovelucy.info/understanding-scopes-in-angularjs.html http://blog.csdn.net/jfk ...
- angularJS中控制器和作用范围
$scope是$rootScope的子作用域控制对象,$rootScope的id为1,其他的为2,3,4... 不同的控制器之间,所对应的作用域控制对象$scope,之间是相互隔离的,如果要共享数据, ...
- AngularJS中控制器继承
本篇关注AngularJS中的控制器继承,了解属性和方法是如何被继承的. 嵌套控制器中属性是如何被继承的? ==属性值是字符串 myApp.controller("ParentCtrl&qu ...
- angularjs基础——控制器
1)当使用非空ng-app和ng-controller时,变量由angularjs控制器来处理 2)控制器接管模型变量后,直接修改模型,模版里的变量还是会自动变的 <!DOCTYPE html& ...
- angularJs 跨控制器与跨页面传值
虽然网上概括了四种或更多的传值方式,但我现在用的顺手的就两种 首先要知道AngularJs可以构建一个单页面应用程序,所以我划分为跨控制器传值 和 跨页面传值 两类 1.跨控制器传值—— $rootS ...
- AngularJS之控制器
控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个控制器时,Angul ...
- AngularJS:控制器
ylbtech-AngularJS:控制器 1.返回顶部 1. AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 ...
随机推荐
- 在sublime-text中设置浏览器预览
配置在Chrome,Firefox中打开 安装 SideBarEnhancements 然后通过ctrl + k, ctrl + b打开侧边栏,在侧边栏的文件中右击,找到 open width -&g ...
- sharepoint的导航开发
2.来大体讲一下“导航” (1)全局导航 : 整个网站集的导航:(如果公司的网站有很多子网站,这时便会用到全局导航啦):贴一下主要代码: using Microsoft.SharePoint.Publ ...
- linux skill
linux console终端乱码解决 1.console终端乱码 在/etc/profile文件的最后一行添加如下内容: export LC_ALL="zh_CN.GB18030" ...
- 自动编译和提交脚本(结合svn和visual studio)
@echo 更新代码开始----------------- TortoiseProc.exe /command:update /path:"D:\work\mmsanguo_publish_ ...
- ios中的addChildViewController 和 android中的fragment
刚才突然感觉这2个东西的功能特别像,记录一下,待研究!
- ACM/ICPC 之 Floyd练习六道(ZOJ2027-POJ2253-POJ2472-POJ1125-POJ1603-POJ2607)
以Floyd解法为主的练习题六道 ZOJ2027-Travelling Fee //可免去一条线路中直接连接两城市的最大旅行费用,求最小总旅行费用 //Time:0Ms Memory:604K #in ...
- MySQL 利用SQL线程对Binlog操作
背景: 对于MySQL的binlog的查看都是用其自带的工具mysqlbinlog进行操作的,其实还有另一个方法来操作binlog,就是Replication中的SQL线程去操作binlog,其实bi ...
- 关于MySQL count(distinct) 逻辑的一个bug【转】
本文来自:http://dinglin.iteye.com/blog/1976026#comments 背景 客户报告了一个count(distinct)语句返回结果错误,实际结果存在值,但是用cou ...
- C++库(TinyXML)
C++库(TinyXML) 什么是XML? "当 XML(扩展标记语言)于 1998 年 2 月被引入软件工业界时,它给整个行业带来了一场风暴.有史以来第一次,这个世界拥有了一种用来结构化文 ...
- Mac会给你一些欣喜
Mac会给你一些欣喜 以前一直没有用过Mac,一直都是用Windows的电脑,只是偶尔会去用Ubuntu这样的Linux系统.Mac OS 确实是一只可以给你欣喜的系统. 上周拿到公司分发的Mac,到 ...