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 mainreference 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的更多相关文章

  1. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  2. angularjs 不同的controller之间值的传递

    Sharing data between controllers in AngularJS I wrote this article to show how it can possible to pa ...

  3. Angularjs中的Controller

    概念:一个应用(APP,本身也是一个大模块)是由若干个模块(module)组成的,每个模块实现一个功能.利于代码的复用. 书写格式: <!DOCTYPE html> <html ng ...

  4. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  5. Angularjs 中的 controller

    接触过程序开发的小伙伴们对 MVC 的开发方式想必一点也不陌生,是的, angularjs 所採用的方式便是 MVVM 的开发方式,这里的 controller 即控制器 了解 controller ...

  6. AngularJs $anchorScroll、$controller、$document

    $anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素. 监听$location.hash()并且滚动到url指定的锚点的地方.可以通过 ...

  7. [AngularJS] Best Practise - Module

    Module definitions Angular modules can be declared in various ways, either stored in a variable or u ...

  8. [AngularJS] Best Practise - Resolve promises in router, defer controllers

    See more:http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/ /** * Created by Answer12 ...

  9. angularJS+requireJS实现controller及directive的按需加载

    最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: ...

随机推荐

  1. eclipse 恢复被删除的文件

    即使你在项目中删除了某一文件,该文件的相关信息仍会保存在本地历史记录中.这就使得你可以恢复那些在项目或文件夹中已被删除的文件.如果恢复某一被删除的文件,则首先在Navigator视图中选择该文件先前所 ...

  2. iOS学习笔记之Category

    iOS学习笔记之Category 写在前面 Category是类别(也称为类目或范畴),使用Category,程序员可以为任何已有的类添加方法.使用类别可以对框架提供的类(无法获取源码,不能直接修改) ...

  3. php获取上传多个文件缺失

    我们的一个页面编辑发布后台出现了图片无法上传保存的情况,经过调试对比发现,原来是file表单数量过多导致,减少file表单的数量即可上传成功.为了满足需求不减少file表单数并保证上传成功,于是更改了 ...

  4. leetcode:Longest Palindromic Substring(求最大的回文字符串)

    Question:Given a string S, find the longest palindromic substring in S. You may assume that the maxi ...

  5. java中子类与基类变量间的赋值

    Java中子类与基类变量间的赋值 子类对象可以直接赋给基类变量. 基类对象要赋给子类对象变量,必须执行类型转换, 其语法是: 子类对象变量=(子类名)基类对象名; 也不能乱转换.如果类型转换失败Jav ...

  6. 朝鲜RedStar_OS_3.0安装图解

    前天exploit-db上出现了3个Local Exploit,都是来自朝鲜的RedStar 3.0的vul.网上也下到了镜像,按网上的方法测试了下,真的是 ————————————————————— ...

  7. O2O在线教育平台策划方案

    一.情景需求痛点: 学生: 1.除了上课上课,就是作业作业,学习太枯燥不好玩怎么办?——我就是想要玩玩玩! 2.第二天要交作业,老师不在,在家作业不懂怎么办?——我想要随身老师! 3.噢耶,周末不用上 ...

  8. Tips for android

    对话框样式Activity获得窗口外点击事件(注册Activity时指明theme为adnroid:Theme.Dialog) 在API11之后添加了setFinishOnTouchOutside() ...

  9. CentOS安装中文输入法:ibus

    转自 http://gnucto.blog.51cto.com/3391516/935964 系统环境:Centos 6.3 编程语言:python + Bash 输入法:ibus 权限支持:root ...

  10. 神奇的linux发行版 tiny core linux

    首先官网在此 http://tinycorelinux.net/ 真正轻量级 名字里带有“tiny”又带有“core”,想必又是一个所谓的“轻量级”发行版. 轻量级我们见多了,debian号称是轻量级 ...