Angular企业级开发——MVC之控制器详解


Posted in Javascript onFebruary 20, 2017

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

4.控制器作用域

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

4.1 视图中控制器并列

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

4.2 视图中控制器嵌套

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

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来避免这个问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 #Javascript
javascript基础练习之翻转字符串与回文
Feb 20 #Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 #Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 #Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 #Javascript
js中new一个对象的过程
Feb 20 #Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 #Javascript
You might like
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
PHP简单遍历对象示例
2016/09/28 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
urllib2自定义opener详解
2014/02/07 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
探矿工程师自荐信
2014/01/24 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
党风廉设责任书
2014/04/16 职场文书
心理咨询承诺书
2014/05/20 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
介绍信的格式
2015/01/30 职场文书
合同范本之电脑出租
2019/08/13 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers