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; }]) |
其优势为:
- 定义vm这样会让我们更好的避免JavaScript的this的坑。
- 如果某个版本的angular不再支持controller as,可以轻易的注入$scope,修改为 var vm = $scope;
- 因为不再注入$scope了,controller更加的POJO,就是一个很普通的JavaScript对象。
- 也因为没有了$scope,而controller实例将会成为scope上的一个属性,所以在controller中我们再也不能使用$watch,$emit,$on之类的特殊方法,因为这些东西往往不该出现在controller中的,给大家一个警告,更好的控制。但是一旦如果没办法必须用的话,可以在征得项目组一致同意,将此controller退回$scope.
- 因为controller实例将会只是$scope的一个属性,所以view模板上的所有字段都会在一个引用的属性上,这可以避开JavaScript原型链继承对于值类型的坑。参加https://github.com/angular/angular.js/wiki/Understanding-Scopes.
- 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 ); }); |
今天就到这里,谢谢。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)