1.MVC中的控制器

AngularJS的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。当然如果我们能够把业务逻辑放到后端的REST服务中,就可以开发轻量级AngularJS应用。

涉及到多个控制器中使用的业务逻辑,需要放到一个公共的服务中,然后把改服务注入使用到该业务逻辑的控制器中。

2.理解控制器

在AngularJS的控制器中,构造函数会有$scope参数。当一个控制器通过ng-controller指令连接到DOM上,Angular将实例化一个新的控制器对象,然后调用指定的控制器的构造函数。一个新的子作用范围(scope)将被创建,并作为一种可注入的参数传递给控制器​​的构造函数为$scope

如果控制器使用controller as语法附加到DOM上,那么控制器实例将被分配给新的$scope范围。并且多了一个和as同名的属性,然后把自己指向这个属性,就方便我们访问了。

3.控制器的作用

3.1 在控制器中初始化模型(添加属性)

创建控制器并将它附加到DOM元素之后,AngularJS会创建一个子作用域。子作用域保存着对应控制器的数据模型。子作用域可以通过$scope来获取。

<!DOCTYPE html>
<html lang="en" ng-app="myApp"> <head>
<meta charset="UTF-8">
<title>AngularJS Controller Demo</title>
<script type="text/javascript" src="angular.min.js"> </script>
<script src="app.js" charset="utf-8"></script>
</head> <body ng-controller="MainController">
<p>{{username}}</p>
<p>{{age}}</p>
</body> </html>
(function () {
'use strict';
angular.module("myApp", [])
.controller('MainController', ['$scope', function ($scope) {
$scope.username="leeli";
$scope.age=28;
}]);
})();

3.2 在控制器中附件行为(添加事件或方法)

附加行为的方式是把方法或事件添加到$scope对象上,以便在控制器对应的视图中使用到改方法。也有很多方法是处理业务的,也是附加到$scope对象上。

ng-click对应的事件方法在controller里面定义为addItem,所以在视图上我们可以使用addItem方法。

视图上的ng-clickng-modelng-repeat都是AngularJS的内置指令,后续博客会详细介绍。

AngularJS Controller Demo

4.控制器作用域

因为控制器是附加到DOM元素上,所以存在着一个视图,有多个控制器。控制器之间可以是并列的,也可以是嵌套的形式存在。

4.1 视图中控制器并列

各个控制器从附加DOM元素节点开始,到节点对应闭合标签结束的地方创建了一个子控制域,单个控制器里面的$scope对象只能访问和调用该控制器范围内的属性和方法。

控制器并列Demo

4.2 视图中控制器嵌套

默认情况下,AngularJS在当前作用域中无法找到某个属性,就会在父级作用域中进行查找。即子级控制器会继承父级控制器中的对象。但是子级作用域和父级作用域中有相同的属性,子级使用自己的作用域。这个时候子级作用域要访问父级作用域的属性可以通过 $parent。类似JavaScript本身的原型链方式。

控制器嵌套Demo

5.何为ControllerAs

AngularJS提供$scope方式来处理Controller。代码如下:

<div ng-app="myApp">
<div ng-controller="MainController">
<p>Hello {{ name }}</p>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope',function($scope) {
$scope.name = "world.";
}]);

AngularJS处理Controller提供一种作用域别名的方式,其实就是将Model直接绑定Controller的实例上。

代码如下:

<div ng-app="myApp">
<div ng-controller="MainController as mainCtrl">
<p>Hello {{ name }}</p>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('MainController', function() {
this.name = "world.";
});

使用这种方式处理Controller有3个好处:

1 Controller的定义不再依赖$scope,Controller就是一个普通的函数定义,这样代码于框架无关,假设哪天不使用AngularJS框架,这里的代码可以进行复用和移植。

2 测试更友好,不需要开发者去模拟一个$scope

3 增强代码的可读性。在控制器并行和嵌套的demo中,视图上我们都使用花括号包含着name,userName等属性。如果有多个控制器并行,或者多个层级的嵌套,我们有时很难区分在视图上使用时哪个控制器下的属性,可以使用ControllerAs来避免这个问题。

6.参考内容

  1. Controller官方介绍

  2. angularjs 嵌套控制器,子控制器访问父控制器

  3. angular controller as syntax vs scope

  4. 用$scope还是用controller as

Angular企业级开发(7)-MVC之控制器的更多相关文章

  1. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  2. Angular企业级开发(8)-控制器的作用域

    scope概念 scope(作用域)是视图和控制器之间的桥梁,scope本身是一个对象,有方法和属性.scope可以应用在视图和控制器上. scope简单示例 <!DOCTYPE html> ...

  3. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  4. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  5. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  6. Angular企业级开发(9)-前后端分离之后添加验证码

    1.背景介绍 团队开发的项目,前端基于Bootstrap+AngularJS,后端Spring MVC以RESTful接口给前端调用.开发和部署都是前后端分离.项目简单部署图如下,因为后台同时采用微服 ...

  7. Angular企业级开发(4)-ngResource和REST介绍

    一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...

  8. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

  9. Angular企业级开发(6)-使用Gulp构建和打包前端项目

    1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...

随机推荐

  1. HUST 1601 Shepherd

    间隔小的时候dp预处理,大的时候暴力..正确做法不会... dp[i][j]表示以i为开头,间隔为j的和,递推:dp[i][j] = dp[i + j][j] + a[i] 测试数据中间隔可能是0.. ...

  2. EnablePrefetcher注册表项的修改与电脑提速

    前些天在图书馆找教材,偶然发现一本windows dos命令应用技巧的书,发现了几个有用的注册表项 EnablePrefetcher这个注册表项是windows用来控制系统预读取数据开放程度的参数,其 ...

  3. iOS9网络适配

    今天升级Xcode7.0,发现网络访问失败. 输出错误信息:The resource could not be loaded because the App Transport Security po ...

  4. STL基础知识

    一,STL的组成 1.什么是STL STL(Standard Template Library)标准模板库的简称,是由惠普开发的一系列软件的总称,STL现在是C++的一部分,已经被构建于编译系统之内, ...

  5. IOS 实现TXT文本自动识别编码的方法

    from :http://kyoworkios.blog.51cto.com/878347/1344013 TXT识别编码是个复杂的问题.幸好有c/c++的一个库能识别. 库的叫uchardet,可以 ...

  6. 如何备份、还原或迁移 WhatsApp 的信息和资料?

    WhatsApp 会在每天清晨 2 点钟自动创建本地备份文件并将备份文件存储在手机系统设置的文件夹中. Google 云端硬盘 您可以备份对话记录和媒体到 Google 云端硬盘以便日后更换手机时仍可 ...

  7. 在DataGrid中实现Button Command

    Command="{Binding butCommand}"会默认查找ListViewItems中对象的属性,而你的ListViewItems中对象应该不包括butCommand属 ...

  8. IM 之 融云

    官方网站:http://www.rongcloud.cn 官方开发文档:http://www.rongcloud.cn/docs/ IM 融云 之 开发基础概念 IM 融云 之 通讯能力库API IM ...

  9. Vue 响应式总结

    有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后getter.setter又失去了. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项 ...

  10. H-W平衡

    hardy-weinberg平衡:标准定义————如果一个种群符合下列条件:1.种群是极大的:2.种群个体间的交配是随机的,也就是说种群中每一个个体与种群中其他个体的交配机会是相等的:3.没有突变产生 ...