这里有新鲜出炉的 AngularJS 开发指南,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本篇文章主要介绍了 Angular 企业级开发——MVC 之控制器详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
1.MVC 中的控制器
AngularJS 的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。当然如果我们能够把业务逻辑放到后端的 REST 服务中,就可以开发轻量级 AngularJS 应用。
涉及到多个控制器中使用的业务逻辑,需要放到一个公共的服务中,然后把改服务注入使用到该业务逻辑的控制器中。
2. 理解控制器
在 AngularJS 的控制器中,构造函数会有
参数。当一个控制器通过
- $scope
指令连接到 DOM 上,Angular 将实例化一个新的控制器对象,然后调用指定的控制器的构造函数。一个新的子作用范围 (
- ng-controller
) 将被创建,并作为一种可注入的参数传递给控制器的构造函数为
- scope
。
- $scope
如果控制器使用
语法附加到 DOM 上,那么控制器实例将被分配给新的 $scope 范围。并且多了一个和 as 同名的属性,然后把自己指向这个属性,就方便我们访问了。
- controller 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
对应的事件方法在 controller 里面定义为
- ng-click
,所以在视图上我们可以使用
- addItem
方法。
- addItem
视图上的
、
- ng-click
和
- ng-model
都是 AngularJS 的内置指令,后续博客会详细介绍。
- ng-repeat
4. 控制器作用域
因为控制器是附加到 DOM 元素上,所以存在着一个视图,有多个控制器。控制器之间可以是并列的,也可以是嵌套的形式存在。
4.1 视图中控制器并列
各个控制器从附加 DOM 元素节点开始,到节点对应闭合标签结束的地方创建了一个子控制域,单个控制器里面的
对象只能访问和调用该控制器范围内的属性和方法。
- $scope
4.2 视图中控制器嵌套
默认情况下,AngularJS 在当前作用域中无法找到某个属性, 就会在父级作用域中进行查找。即子级控制器会继承父级控制器中的对象。但是子级作用域和父级作用域中有相同的属性,子级使用自己的作用域。这个时候子级作用域要访问父级作用域的属性可以通过
。类似 JavaScript 本身的原型链方式。
- $parent
5. 何为 ControllerAs
AngularJS 提供
方式来处理 Controller。代码如下:
- $scope
- <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
来源: http://www.phperz.com/article/17/0429/327458.html