控制器的作用

今天和大家学习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 ...

随机推荐

nohup程序后台执行
Linux常用命令,用于不挂断的执行程序. nohup命令:如果你正在运行一个进程,而且你觉得在退出帐户时该进程还不会结束,那么可以使用nohup命令.该命令可以在你退出帐户/关闭终端之后继续运行相应 ...
使用C#处理基于比特流的数据
使用C#处理基于比特流的数据 0x00 起因最近需要处理一些基于比特流的数据,计算机处理数据一般都是以byte(8bit)为单位的,使用BinaryReader读取的数据也是如此,即使读取bool型 ...
从Membership 到 .NET4.5 之 ASP.NET Identity
我们前面已经讨论过了如何在一个网站中集成最基本的Membership功能,然后深入学习了Membership的架构设计.正所谓从实践从来,到实践从去,在我们把Membership的结构吃透之后,我们要 ...
java EE设计模式简介
1.何为设计模式设计模式提供了对常见应用设计问题的解决方案.在面向对象的编程中,设计模式通常在解决与对象创建和交互相关的问题,而非整体软件架构所面对的大规模问题,它们以样板代码的形式提供了通用的解决 ...
python+uwsgi导致redis无法长链接引起性能下降问题记录
今天在部署python代码到预生产环境时,web站老是出现redis链接未初始化,无法连接到服务的提示,比对了一下开发环境与测试环境代码,完全一致,然后就是查看各种日志,排查了半天也没有查明是什么原因 ...
C#如何在PDF文件添加图片印章
文档中添加印章可以起一定的作用,比如,防止文件随意被使用,或者确保文档内容的安全性和权威性.C#添加图片印章其实也有很多实现方法,这里我使用的是免费的第三方软件Free Spire.PDF,向大家阐述 ...
angularjs 依赖注入--自己学着实现
在用angular依赖注入时,感觉很好用,他的出现是为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个 ...
MySQL 系列（四）主从复制、备份恢复方案生产环境实战
第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决第二篇:MySQL 系列(二) 你不知道的数据库操作第三篇:MySQL 系列(三)你不知道的视图.触发器.存储过程.函数 ...
[开发笔记]yum错误
yum 错误TypeError: rpmdb open failed 解决办法是因为RPM数据库出现损坏导致的,它导致所有的软件的升级.安装甚至是删除都会出现问题,终端出现乱码,YUMEX也用不成, ...
BPM配置故事之案例7-公式计算
行政主管发来邮件.要求物资明细表增加"单价""总价"."单价"由其审批时填写,"总价"根据"单价"与 ...