文档章节

angular controller as syntax vs scope

liuyuantao
 liuyuantao
发布于 2016/04/09 09:53
字数 926
阅读 10
收藏 0

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

angular.module("app",[])
  .controller("demoController",["$scope",function($scope){
    $scope.title = "angualr";
  }])

 <div ng-app="app" ng-controller="demoController">
      hello : {% raw %}{{title}}{% endraw %} !
</div>

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

angular.module("app",[])
  .controller("demoController",[function(){
    this.title = "angualr";
  }])

  <div ng-app="app" ng-controller="demoController as demo">
        hello : {% raw %}{{demo.title}}{% endraw %} !
  </div> 

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

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

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

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的写法如下:

angular.module("app",[])
 .controller("demoController",[function(){
        var vm = this;

        vm.title = "angualr";

        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文档:

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);
        });

本文转载自:http://blog.csdn.net/u013510614/article/details/50703770

liuyuantao
粉丝 5
博文 134
码字总数 27666
作品 0
武汉
高级程序员
私信 提问
All About Angular 2.0

angular All About Angular 2.0Posted by Rob Eisenberg on November 6th, 2014. Have questions about the strategy for Angular 2.0? This is the place. In the following article I'll e......

Ethan_prog
2015/03/06
150
0
Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同...

顽Shi
2014/09/21
9.4K
2
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
40
0
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608
2018/04/19
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
309
2

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
16
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
18
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部