博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular企业级开发(7)-MVC之控制器
阅读量:6681 次
发布时间:2019-06-25

本文共 2233 字,大约阅读时间需要 7 分钟。

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来获取。

    
AngularJS Controller Demo

{

{username}}

{

{age}}

(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的内置指令,后续博客会详细介绍。

4.控制器作用域

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

4.1 视图中控制器并列

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

4.2 视图中控制器嵌套

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

5.何为ControllerAs

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

Hello {

{ name }}

var app = angular.module('myApp', []);app.controller('MainController', ['$scope',function($scope) {
$scope.name = "world.";}]);

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

代码如下:

Hello {

{ name }}

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.参考内容

本文转自快乐八哥博客园博客,原文链接http://www.cnblogs.com/liminjun88/p/6418239.html如需转载请自行联系原作者
快乐八哥
你可能感兴趣的文章
iOS网络编程之同步、异步、请求队列 2014-12-7
查看>>
链表的应用~~~~~~一元多项式的相加——原创
查看>>
阿花宝宝 Java基础笔记 之 多态
查看>>
HTML5学习之路——HTML 5 Web 存储
查看>>
enum和int、string的转换操作
查看>>
C# ACCESS数据库操作类
查看>>
详解vue通过NGINX部署在子目录或者二级目录实践
查看>>
括号匹配算法思想
查看>>
HDU 1043 Eight 【经典八数码输出路径/BFS/A*/康托展开】
查看>>
589. N叉树的前序遍历
查看>>
Java线程池使用和常用参数(待续)
查看>>
java 中 get post
查看>>
Hive学习之Locking
查看>>
关于Lucene全文检索相关技术
查看>>
简单理解冒泡排序
查看>>
halcon算子翻译——fuzzy_measure_pairing
查看>>
Vertex and FragmentShader顶点与片段着色器
查看>>
Python体验(10)-图形界面之计算器
查看>>
debian9 开启rc.local服务
查看>>
Java时间日期格式转换
查看>>