控制器的作用

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

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

Conclusion

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

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

  1. AngularJS进阶(四十)创建模块、服务

    AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...

  2. Angular开发者指南（四）控制器

    了解控制器controller 在AngularJS中,Controller由JavaScript构造函数定义,用于扩充AngularJS Scope. 当控制器通过ng-controller指令连接 ...

  3. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 7.4 GRASP原则四：控制器 Controller

    4.GRASP原则四:控制器 Controller  What first object beyond the UI layer receives and co-ordinates (control ...

  5. 黄聪：AngularJS 动态加载控制器实例-ocLoazLazy

    一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...

  6. [angularjs] angularjs系列笔记（四）控制器

    Scope作用域 Scope作用域是应用在HTML视图和Js控制器之间的纽带 Scope是一个对象,有可用的属性和方法 根作用域 所有的应用都有一个$rootScope,它可以作用在ng-app指令包 ...

  7. AngularJS 笔记系列（四）控制器和表达式

    控制器:在 Angular 中控制器是一个函数,用来向作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 使用方法: var app = angualr.module('a ...

  8. AngularJS（四）——ng-controller（控制器）

    前言 上篇大概说了一下指令的应用格式以及创建自定义指令方法,本篇重点介绍一些ng-controller都有哪些小作用. 内容 通过修改控制器部分,修改显示界面. Demo <div ng-app ...

  9. AngularJS（四）：控制器、事件

    本文也同步发表在我的公众号“我的天空” 控制器 控制器可以说是AngularJS中最重要的部分了!之前的一些示例,除了第一讲的示例以外,我们对于AngularJS的使用都集中在HTML部分,其实Ang ...

随机推荐

  1. mapreduce中一个map多个输入路径

    package duogemap; import java.io.IOException; import java.util.ArrayList; import java.util.List; imp ...

  2. 【翻译】MongoDB指南/聚合——聚合管道

    [原文地址]https://docs.mongodb.com/manual/ 聚合 聚合操作处理数据记录并返回计算后的结果.聚合操作将多个文档分组,并能对已分组的数据执行一系列操作而返回单一结果.Mo ...

  3. 【开源】.Net 动态脚本引擎NScript

    开源地址: https://git.oschina.net/chejiangyi/NScript 开源QQ群: .net 开源基础服务  238543768 .Net 动态脚本引擎 NScript   ...

  4. 使用github远程仓库

    经过几天对github的研究,终于把自己想完成的给解决了,发现google真的有很多解释,但是很多也会出现一些bug,对于初学者真的很多烦恼,所以整理一份,能给初识github的你有所帮助 一,首先, ...

  5. （资源整理）带你入门Spark

    一.Spark简介: 以下是百度百科对Spark的介绍: Spark 是一种与 Hadoop 相似的开源集群计算环境,但是两者之间还存在一些不同之处,这些有用的不同之处使 Spark 在某些工作负载方 ...

  6. Atitit.cto 与技术总监的区别

    Atitit.cto 与技术总监的区别 1. 核心区别1 2. Cto主要职责1 3. 如何提升到cto1 4. CTO五种基本的必备素质:2 5. 2 1. 核心区别 技术总监(Chief Tech ...

  7. 前端如何正确选择offer，到底选哪个？

    文章背景:来自于一次线上交流,当时回答感觉比较粗糙,做个阶段性的总结,也分享给其它朋友. 当时的题目是,共2个offer,如何选择: 1. 美团外卖前端 2. 京东深圳前端研发(只有通过邮件,还有收到 ...

  8. [转载]Java 8 日期&时间 API

    Java 8 日期和时间 声明 本文转自http://www.journaldev.com/2800/java-8-date-localdate-localdatetime-instant,以mark ...

  9. MzBlog分析

    早上衣明志 在QQ群里说他的博客开源了,地址在 https://github.com/qihangnet/MZBlog,基于NancyFX和MongoDB开发的.博客内容需要使用 MarkDown 进 ...

  10. Ubuntu(Linux) + mono + xsp4 + nginx +asp.net MVC3 部署

    折腾了一下,尝试用Linux,部署mvc3. 分别用过 centos 和 ubuntu ,用ubuntu是比较容易部署的. 操作步骤如下: 一.终端分别如下操作 sudo su ->输入密码 a ...