angular controller as syntax vs scope

今天要和大家分享的是angular从1.2版本开始带来了新语法Controller
as。再次之前我们对于angular在view上的绑定都必须使用直接的scope对象，对于controller来说我们也得必须注入$scope这个service。如下：

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

angular.module("app",[])

.controller("demoController",["$scope",function($scope){

    $scope.title = "angualr";

 }])

 

<div ng-app="app"
ng-controller="demoController">

    hello : {{title}} !

</div>　　

有些人觉得即使这样我们的controller还是不够POJO，以及对于coffescript爱好者不足够友好，所以在angular在1.2给我带来了一个新的语法糖这就是本文将要说的controller
as的语法糖，修改上面的demo将会变成：

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

angular.module("app",[])

.controller("demoController",[function(){

    this.title = "angualr";

}])

 

<div ng-app="app"
ng-controller="demoController as demo">

     hello : {{demo.title}} !

</div>　

这里我们可以看见现在controller不再有$scope的注入了，感觉controller就是一个很简单的平面的JavaScript对象了，不存在任何的差别了。再则就是view上多增加了个demoController
as demo，给controller起了一个别名，在此后的view模板中靠这个别名来访问数据对象。

或许看到这里你会问为什么需要如此啊，不就是个语法糖而已，先别着急，我们会在后边分析$scope和他的差别。在此之前我们先来看看angular源码的实现这样才会有助于我们的分析：

下面是一段来自angular的code：在1499行开始(行数只能保证在写作的时候有效)

?





1

2

3

4

5

if
(directive.controllerAs) {

         locals.$scope[directive.controllerAs] = controllerInstance;

  }　　

如果你希望看更完全的code请猛击这里https://github.com/angular/angular.js/blob/c7a1d1ab0b663edffc1ac7b54deea847e372468d/src/ng/compile.js.

从上面的代码我们能看见的是：angular只是把controller这个对象实例以其as的别名在scope上创建了一个新的对象属性。靠，就这么一行代码搞定！

先别急，既然是语法糖，那么它肯定有他出现的原因，让我们来和直接用$scope对比下：

在此文之前我在angularjs的群中和大家讨论了下我的看法，得到大家不错的反馈，所以有了本文，记录和分享下来。

可以规定对于controller as的写法如下：

?





1

2

3

4

5

6

7

angular.module("app",[])

 .controller("demoController",[function(){

        var
vm = this;<br>

        vm.title = "angualr";<br>

        return
vm;

 }])

　　

其优势为：

  1. 定义vm这样会让我们更好的避免JavaScript的this的坑。

  2. 如果某个版本的angular不再支持controller as,可以轻易的注入$scope,修改为 var vm =
    $scope;

  3. 因为不再注入$scope了，controller更加的POJO，就是一个很普通的JavaScript对象。

  4. 也因为没有了$scope，而controller实例将会成为scope上的一个属性，所以在controller中我们再也不能使用$watch,$emit,$on之类的特殊方法，因为这些东西往往不该出现在controller中的，给大家一个警告，更好的控制。但是一旦如果没办法必须用的话，可以在征得项目组一致同意，将此controller退回$scope.

  5. 因为controller实例将会只是$scope的一个属性，所以view模板上的所有字段都会在一个引用的属性上，这可以避开JavaScript原型链继承对于值类型的坑。参加https://github.com/angular/angular.js/wiki/Understanding-Scopes.

  6. controller as 对于 coffescript,liveScript更友好。
    7.模板上定义的每个字段方法都会在scope寄存在controller
    as别名上的引用上，所以在controller继承中，不会在出现命名冲突的问题。

注释:对于route，也有个controllerAs的属性可以设置，下面代码来之angular
doc文档：

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

angular.module(‘ngViewExample‘, [‘ngRoute‘, ‘ngAnimate‘],

         function($routeProvider, $locationProvider) {

           $routeProvider.when(‘/Book/:bookId‘, {

             templateUrl: ‘book.html‘,

             controller: BookCntl,

             controllerAs: ‘book‘

           });

           $routeProvider.when(‘/Book/:bookId/ch/:chapterId‘, {

             templateUrl: ‘chapter.html‘,

             controller: ChapterCntl,

             controllerAs: ‘chapter‘

           });

           // configure html5 to get links working on jsfiddle

           $locationProvider.html5Mode(true);

       });

今天就到这里，谢谢。

angular controller as syntax vs scope,布布扣,bubuko.com

时间： 2024-11-07 12:30:14

angular controller as syntax vs scope的相关文章

Part 32 AngularJS controller as syntax

So far in this video series we have been using $scope to expose the members from the controller to the view. app.controller("mainController", function ($scope) { $scope.message = "Hello Angular"; }); In the example above we are attachi

[angular] 篇 指令中的scope

scope参数有以下几种方式: 1,不填,默认为scope:false 2,scope:true 3,scope:{} 4, scope:{ name: '=', age: '@', say: '&' } 下面我来分别说明他们之间的用法: 第一种:看代码 <script> angular module('exampleApp', []) .controller('scopeCtrl', function ($scope) { // do something }); .directive

angularjs学习笔记--ng-model、controller、DI、$scope、$provide

依赖: RESTful功能由angularjs在ngResource模块中提供,该模块与核心angularjs框架分开分发. ng-model: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js

angularjs调用springmvc action时，访问到action但是数据不能正确返回到angular controller中

问题:angularjs调用url: /admin/query ,  action方法已经进去了,数据也查询到了,但是数据angularjs controller.js中无法获取到,浏览器中看到/admin/admin/query地址的调用(不知道为啥多加了个/admin),都报404错了. 解决:springMVC action方法必须要增加注解@ResponseBody. webapp/jsp/main.jsp: <%@ page contentType="text/html;char

Angular作用域的层级概念(scope)

首先引入 angular 的根作用域:$rootScope ng-app:定义了angualr的作用域 ng-controller:定义了控制器 $scope定义了视图与控制器之间的纽带,而scope本身是垂直继承的,当子作用域没有定义,便会找父作用域,逐层往上找直到根作用域 $rootScope. 没有定义控制器的元素对应的即是根作用域,如下(<div>{{msg}}</div>) 看下面代码,当我们点击parent控制器时,发现其子控制器内容会跟着变化,而父控制器以及根作用域绑

Angular学习心得之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时候,就已经为指令生成了隔离作用域,现在,我们来看看绑定策略的三种形式:& .= .@. 首先是

Angular 从DOM中获取scope

节选官方文档: 原文:https://docs.angularjs.org/guide/scope Retrieving Scopes from the DOM. Scopes are attached to the DOM as $scope data property, and can be retrieved for debugging purposes. (It is unlikely that one would need to retrieve scopes in this way

angular controller js 压缩后报错解决方案

简单介绍下ng-annotate这个项目,这个项目正好提供了gulp的插件. gulp配置文件: var gulp = require('gulp'); var ngAnnotate = require('gulp-ng-annotate'); //这个 var gutil = require('gulp-util'); var bower = require('bower'); var uglify = require('gulp-uglify'); var concat = require(

AngularJS 常见面试问题

ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是,ng-if 在后面表达式为 true 的时候才创建这个 dom 节点,ng-show 是初始时就创建了,用 display:block 和 display:none 来控制显示和不显示. 第二点区别是,ng-if 会(隐式地)产生新作用域,ng-switch . ng-include 等会动态创建一块界面的也是如此. 这样会导致,在 ng-if 中用基本变量绑定 ng-model,并在外层 div 中把此 model 绑定给