[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文件的效果: ...
随机推荐
- eclipse 恢复被删除的文件
即使你在项目中删除了某一文件,该文件的相关信息仍会保存在本地历史记录中.这就使得你可以恢复那些在项目或文件夹中已被删除的文件.如果恢复某一被删除的文件,则首先在Navigator视图中选择该文件先前所 ...
- iOS学习笔记之Category
iOS学习笔记之Category 写在前面 Category是类别(也称为类目或范畴),使用Category,程序员可以为任何已有的类添加方法.使用类别可以对框架提供的类(无法获取源码,不能直接修改) ...
- php获取上传多个文件缺失
我们的一个页面编辑发布后台出现了图片无法上传保存的情况,经过调试对比发现,原来是file表单数量过多导致,减少file表单的数量即可上传成功.为了满足需求不减少file表单数并保证上传成功,于是更改了 ...
- leetcode:Longest Palindromic Substring(求最大的回文字符串)
Question:Given a string S, find the longest palindromic substring in S. You may assume that the maxi ...
- java中子类与基类变量间的赋值
Java中子类与基类变量间的赋值 子类对象可以直接赋给基类变量. 基类对象要赋给子类对象变量,必须执行类型转换, 其语法是: 子类对象变量=(子类名)基类对象名; 也不能乱转换.如果类型转换失败Jav ...
- 朝鲜RedStar_OS_3.0安装图解
前天exploit-db上出现了3个Local Exploit,都是来自朝鲜的RedStar 3.0的vul.网上也下到了镜像,按网上的方法测试了下,真的是 ————————————————————— ...
- O2O在线教育平台策划方案
一.情景需求痛点: 学生: 1.除了上课上课,就是作业作业,学习太枯燥不好玩怎么办?——我就是想要玩玩玩! 2.第二天要交作业,老师不在,在家作业不懂怎么办?——我想要随身老师! 3.噢耶,周末不用上 ...
- Tips for android
对话框样式Activity获得窗口外点击事件(注册Activity时指明theme为adnroid:Theme.Dialog) 在API11之后添加了setFinishOnTouchOutside() ...
- CentOS安装中文输入法:ibus
转自 http://gnucto.blog.51cto.com/3391516/935964 系统环境:Centos 6.3 编程语言:python + Bash 输入法:ibus 权限支持:root ...
- 神奇的linux发行版 tiny core linux
首先官网在此 http://tinycorelinux.net/ 真正轻量级 名字里带有“tiny”又带有“core”,想必又是一个所谓的“轻量级”发行版. 轻量级我们见多了,debian号称是轻量级 ...