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 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
小程序实现侧滑删除功能
Jun 25 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
ajax缓存问题解决途径
2006/12/06 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
javascript event 事件解析
2011/01/31 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
如何让python的运行速度得到提升
2020/07/08 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
Java语言程序设计测试题改错题部分
2014/07/22 面试题
创业计划书中要认真思考的问题
2013/12/28 职场文书
优秀员工获奖感言
2014/03/01 职场文书
弄虚作假心得体会
2014/09/10 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
Python函数中的不定长参数相关知识总结
2021/06/24 Python
Python+Appium自动化测试的实战
2021/06/30 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers