[AngularJS] Best Practise - Controller
ControllerAs:
Use thecontrollerAs
syntax always as it aids in nested scoping and controller instance reference.
Bad:
<div ng-controller="MainCtrl">
{{ someObject }}
</div>
Good:
<div ng-controller="MainCtrl as main">
{{ main.someObject }}
</div>
Use the router to couple the controller declarations with the relevant views by telling each route
what controller to instantiate.
Best:
<!-- main.html -->
<div>
{{ main.someObject }}
</div>
<!-- main.html --> <script>
// ...
function config ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
});
}
angular
.module('app')
.config(config);
//...
</script>
This avoids using $parent
to access any parent controllers from a child controller, simple hit the main
reference and you've got it. This could avoid things such as $parent.$parent
calls.
ControllerAs as this keyword:
The controllerAs
syntax uses the this
keyword inside controllers instead of $scope
. When usingcontrollerAs
, the controller is infact bound to $scope
, there is a degree of separation.
Bad:
function MainCtrl ($scope) {
$scope.someObject = {};
$scope.doSomething = function () { };
}
angular
.module('app')
.controller('MainCtrl', MainCtrl);
Because in router, already defined controllerAs:
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
});
Threrefore, no need to use $scope.
Good:
function MainCtrl () {
this.someObject = {};
this.doSomething = function () { };
}
angular
.module('app')
.controller('MainCtrl', MainCtrl);
Also:
function MinCtrl(){
var vm = this;
vm.someObject = {};
vm.doSomething = function(){};
} angular
.module('app')
.controller('MainCtrl', MainCtrl);
These just show examples of Objects/functions inside Controllers, however we don't want to put logic in controllers...
Avoid Controller Logic:
Avoid writing logic in Controllers, delegate to Factories/Services.
Bad:
function MinCtrl(){
var vm = this;
vm.someObject = {};
vm.doSomething = function(){};
} angular
.module('app')
.controller('MainCtrl', MainCtrl);
Good:
function MainCtrl (SomeService) {
var vm = this;
vm.doSomething = SomeService.doSomething;
}
angular
.module('app')
.controller('MainCtrl', MainCtrl);
This maximises reusability, encapsulated functionality and makes testing far easier and persistent.
[AngularJS] Best Practise - Controller的更多相关文章
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- angularjs 不同的controller之间值的传递
Sharing data between controllers in AngularJS I wrote this article to show how it can possible to pa ...
- Angularjs中的Controller
概念:一个应用(APP,本身也是一个大模块)是由若干个模块(module)组成的,每个模块实现一个功能.利于代码的复用. 书写格式: <!DOCTYPE html> <html ng ...
- AngularJS实战之Controller之间的通信
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...
- Angularjs 中的 controller
接触过程序开发的小伙伴们对 MVC 的开发方式想必一点也不陌生,是的, angularjs 所採用的方式便是 MVVM 的开发方式,这里的 controller 即控制器 了解 controller ...
- AngularJs $anchorScroll、$controller、$document
$anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素. 监听$location.hash()并且滚动到url指定的锚点的地方.可以通过 ...
- [AngularJS] Best Practise - Module
Module definitions Angular modules can be declared in various ways, either stored in a variable or u ...
- [AngularJS] Best Practise - Resolve promises in router, defer controllers
See more:http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/ /** * Created by Answer12 ...
- angularJS+requireJS实现controller及directive的按需加载
最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: ...
随机推荐
- c/c++ 数字转成字符串, 字符串转成数字
c/c++ 数字转成字符串, 字符串转成数字 ------转帖 数字转字符串: 用C++的streanstream: #include <sstream> #Include <str ...
- win7 提示"Windows 无法连接到System Event Notification Service服务......"的解决办法
登录win7系统,突然出现如图1的提示,无线网络中断,不能上网,多次插拔无线网卡问题依然. 图1 解决过程如下: 1.检查网卡硬件状况,在设备管理器中查看网卡现象正常,排除网卡硬件故障. 2.查看服务 ...
- Netmask v. Address Prefix Length
Netmask Address Prefix Length Hosts / Class C's / Class B's / Class A's (Class C) / / , / , / , / , ...
- 为operamasks增加HTML扩展方式的组件调用
#为operamasks增加HTML扩展方式的组件调用 ##背景 之前的[博文](http://www.cnblogs.com/p2227/p/3540858.html)中有提及到,发现easyui中 ...
- java 的开源wiki维基系统
几乎所有 维基 系统的对比网址: http://www.wikimatrix.org/ XWiki, 第二代wiki. 它里面使用的 velocity 模板语言对j2ee开发相当有参考价值, ...
- pthread_cond_wait 信号量丢失
服务器在使用pthread_cond_wait的时候遇到一个问题.具体描述如下 一个主进程,给n个从线程发送计算请求,主进程会等待n个线程返回,在执行下一步 从线程计算完毕后,最后一个线程会通知主线程 ...
- 主题敏感词PageRank
[主题敏感词PageRank] PageRank忽略了主题相关性,导致结果的相关性和主题性降低,对于不同的用户,甚至有很大的差别.例如,当搜索“苹果”时,一个数码爱好者可能是想要看 iphone 的信 ...
- VoHelper
VoHelper package com.isoftstone.pcis.policy.core.helper; import com.isoftstone.fwk.dao.CommonDao; im ...
- 咏南多层开发框架支持最新的DELPHI 10 SEATTLE
购买了咏南多层开发框架的老用户如有需要提供免费升级. 中间件
- JSON如何序列图片
图片采用JSON格式传输的话,需要把图片转成Base64格式. 首先把图片转成流:Image1.Picture.Graphic.SaveToStream(ss);然后编码成base64格式的:Enco ...