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 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
js 数据类型判断的方法
Dec 03 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
PHP4在Windows2000下的安装
2006/10/09 PHP
php分页示例代码
2007/03/19 PHP
基于initPHP的框架介绍
2013/04/18 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
AngularJS中的模块详解
2015/01/29 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python星号*与**用法分析
2018/02/02 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
Linux常见面试题
2013/03/18 面试题
工业设计专业个人求职信范文
2013/12/28 职场文书
服装发布会策划方案
2014/05/22 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
行政处罚告知书
2015/07/01 职场文书
图书借阅制度范本
2015/08/06 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server