AngularJS 第四天----控制器
控制器的作用
今天和大家学习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 ...
随机推荐
- Hive安装配置指北（含Hive Metastore详解）
个人主页: http://www.linbingdong.com 本文介绍Hive安装配置的整个过程,包括MySQL.Hive及Metastore的安装配置,并分析了Metastore三种配置方式的区 ...
- 【NLP】十分钟快览自然语言处理学习总结
十分钟学习自然语言处理概述 作者:白宁超 2016年9月23日00:24:12 摘要:近来自然语言处理行业发展朝气蓬勃,市场应用广泛.笔者学习以来写了不少文章,文章深度层次不一,今天因为某种需要,将文 ...
- Chrome V8引擎系列随笔 (1)：Math.Random()函数概览
先让大家来看一幅图,这幅图是V8引擎4.7版本和4.9版本Math.Random()函数的值的分布图,我可以这么理解 .从下图中,也许你会认为这是个二维码?其实这幅图告诉我们一个道理,第二张图的点的分 ...
- Winserver2012下mysql 5.7解压版(zip)配置安装
一.安装 下载mysqlzip版本mysql不需要运行可执行文件,解压即可,下载zip版本mysqlmsi版本mysql双击文件即可安装,相对简单,本文不介绍此版本安装 配置环境变量打开环境变量配置页 ...
- Configure a bridged network interface for KVM using RHEL 5.4 or later?
environment Red Hat Enterprise Linux 5.4 or later Red Hat Enterprise Linux 6.0 or later KVM virtual ...
- 自定义ConfigSection
CCustom configuration section with intelisense
- 第13章 Linux日志管理
1. 日志管理 (1)简介 在CentOS 6.x中日志服务己经由rsyslogd取代了原先的syslogd服务.rsyslogd日志服务更加先进,功能更多.但是不论该服务的使用,还是日志文件的格式其 ...
- 使用 SecurityManager 和 Policy File 管理 Java 程序的权限
参考资料 该文中的内容来源于 Oracle 的官方文档.Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以从这个总入口 Java SE 8 Documentati ...
- 我的公司培训讲义（1）：.NET开发规范教程
这是1年多以前我在公司所做讲座的讲义,现在与园友们分享,欢迎拿去使用.一起讨论.文中有若干思考题,对园友们是小菜一碟.另有设计模式讲义一篇,随后发布.博文上了首页,感谢博客园团队推荐,也感谢所有园友的 ...
- ABP框架 - 启动配置
文档目录 本节内容: 配置ABP 替换内置服务 配置模块 为一个模块创建配置 ABP在启动时,提供基础框架和模型来配置和模块化. 置ABP 在预初始化事件中进行配置,示例: kid1412注:XmlL ...