控制器的作用

今天和大家学习AngularJS中控制器方面的知识，本文会给出一些例子来说明如何使用AngularJS的控制器。在开始我们的例子之前，首先说说AngularJS控制器的作用。简单的来说AngularJS的控制器是一个函数，它通过操作$scope对象来改变视图。AngularJS同其他JS框架最主要的区别是控制器不合适用来执行DOM操作、格式化以及除存储数据模型之外的状态维护操作。换句话说，控制器只是 $scope和视图之间的桥梁。

code

下面的例子中展示如何使用控制器，在控制器中定义JS函数修改$scope对象的属性值，从而改变视图的展示。

<!DOCTYPE html>

<!--绑定MyApp AngularJS模块-->

<html ng-app="MyApp">

<head>

  <title>HelloWorld APP</title>

  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<!--div绑定MyFirstController-->

<div ng-controller="MyFirstController">

  <!--点击Add button调用add函数增加1-->

  <button ng-click="add(1)" class="button">Add</button>

  <!--点击subtract button调用subtract函数减1-->

  <button ng-click="subtract(1)" class="button">Subtract</button>

  <!--绑定count，显示计数器的值-->

  <p1>counter: {{counter}}</p1>

</div>

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

</body>

</html>

<!--创建MyApp模块-->

var app = angular.module("MyApp", []);

<!--创建MyFirstController控制器-->

app.controller("MyFirstController", function ($scope) {

  <!--初始化化计数器的值-->

  $scope.counter = 0;

  <!--定义增加函数-->

  $scope.add = function (amount) {

    $scope.counter += amount;

  };

  <!--定义减函数-->

  $scope.subtract = function () {

    $scope.counter -= amount;

  }

})

视图显示结果如下，点击add显示数字+1,点击subtract显示数字-1.

指令ng-controller可以创建作用域，当嵌套ng-controller，内部嵌套的controller可以访问到外部controller定义的socpe属性。

Suggestion

控制器应当尽量保持短小精悍, 不要选择在控制器中操作视图和复杂的业务逻辑
复杂的逻辑的通常放到指令和服务中去

Conclusion

今天和大家学习了AngularJS控制器的使用方法，希望能够和大家一起进步。加油:)

AngularJS 第四天----控制器的更多相关文章

AngularJS进阶(四十)创建模块、服务
AngularJS进阶(四十)创建模块.服务学习要点使用模块构架应用创建和使用服务为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...
Angular开发者指南（四）控制器
了解控制器controller 在AngularJS中,Controller由JavaScript构造函数定义,用于扩充AngularJS Scope. 当控制器通过ng-controller指令连接 ...
AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
7.4 GRASP原则四：控制器 Controller
4.GRASP原则四:控制器 Controller  What first object beyond the UI layer receives and co-ordinates (control ...
黄聪：AngularJS 动态加载控制器实例-ocLoazLazy
一.AngularJS动态加载控制器和视图实例路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...
[angularjs] angularjs系列笔记（四）控制器
Scope作用域 Scope作用域是应用在HTML视图和Js控制器之间的纽带 Scope是一个对象,有可用的属性和方法根作用域所有的应用都有一个$rootScope,它可以作用在ng-app指令包 ...
AngularJS 笔记系列（四）控制器和表达式
控制器:在 Angular 中控制器是一个函数,用来向作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 使用方法: var app = angualr.module('a ...
AngularJS（四）——ng-controller（控制器）
前言上篇大概说了一下指令的应用格式以及创建自定义指令方法,本篇重点介绍一些ng-controller都有哪些小作用. 内容通过修改控制器部分,修改显示界面. Demo <div ng-app ...
AngularJS（四）：控制器、事件
本文也同步发表在我的公众号“我的天空” 控制器控制器可以说是AngularJS中最重要的部分了!之前的一些示例,除了第一讲的示例以外,我们对于AngularJS的使用都集中在HTML部分,其实Ang ...

随机推荐

线性判别分析LDA原理总结
在主成分分析(PCA)原理总结中,我们对降维算法PCA做了总结.这里我们就对另外一种经典的降维方法线性判别分析(Linear Discriminant Analysis, 以下简称LDA)做一个总结. ...
IE6/7下空div占用空间的问题
最近注意力没在前端上面,工作碰到这样一个问题,下意识的写了句 font-size:0;line-height:0;哪知道引发了更大的bug.后来插入数据进去的时候都不显示了..再后来百度一番找到,原来 ...
06.SQLServer性能优化之---数据库级日记监控
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 之前说了一下数据库怎么发邮件:http://www.cnblogs.com/duniti ...
旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
在vim中使用查找命令查找指定字符串
要自当前光标位置向上搜索,请使用以下命令: /pattern Enter 其中,pattern 表示要搜索的特定字符序列. 要自当前光标位置 ...
Loadrunner Http Json接口压力测试
前天接到了一个测试任务,要求测试一下ES(elsticsearch)在不同并发下的查询效率.如图: 业务场景是在客户端根据具体车牌查询相关车辆信息,结果返回前10条记录. 从图中可以看到,接口的请求参 ...
C语言中如何判断文件是否存在
方法一:access函数判断文件夹或者文件是否存在函数原型: int access(const char *filename, int mode); 所属头文件:io.h filename:可以填写 ...
Android之解析XML
1.XML:可扩展标记语言. 可扩展标记语言是一种很像超文本标记语言的标记语言. 它的设计宗旨是传输数据,而不是显示数据. 它的标记没有被预定义.需要自行定义标签. 它被设计为具有自我描述性. 是W3 ...
基于SOA架构的TDD测试驱动开发模式
以需求用例为基,Case&Coding两条线并行,服务(M)&消费(VC)分离,单元.接口.功能.集成四层质量管理,自动化集成.测试.交付全程支持. 3个大阶段(需求分析阶段.研发准备 ...
jenkins无法重启tomcat的原因
在使用Hudson的执行sh脚本的时候,如果sh脚本是一个后台进程,如 Tomcat 这样的服务.如果使用Hudson的默认配置,会发现这些sh 进程有启动的过程,但是不会常驻后台,看Hudson 输 ...