Angularjs书写规范
文件命名原则:
- 遵循以描述组件功能,然后是类型(可选)的方式来给所有的组件提供统一的命名
- 命名:feature.type.js。
- 测试文件名(feature.type.spec.js)
- 大多数文件都有2个名字:
- 文件名 (avengers.controller.js)
- 带有Angular的注册组件名 (AvengersController)
- 测试文件名(avengers.controller.spec.js)
规则
一个文件只定义一个组件
每一个文件都需要使用JavaScript闭包
使用module的时候,避免直接用一个变量,而是使用getter的链式语法。
- 设置module,
angular.module('app', []);。 - 获取module,
angular.module('app');。
- 设置module,
回调函数使用命名函数,不要用匿名函数
// logger.js
angular
.module('app')
.factory('logger', logger); function logger () { }
在controller中需要先把$scope复制给可捕获的变量,选择一个有代表性的名称,例如vm代表ViewModel(方便controller as 语法糖之间的切换)
function Customer ($scope) {
var vm = $scope;
vm.name = {};
vm.sendMessage = function() { };
}
可绑定成员放到顶部(注:如果一个函数就是一行,那么只要不影响可读性就把它放到顶部。)
function Sessions() {
var vm = this; vm.gotoSession = gotoSession;
vm.refresh = refresh;
vm.search = search;
vm.sessions = [];
vm.title = 'Sessions'; //////////// function gotoSession() {
/* */
} function refresh() {
/* */
} function search() {
/* */
}
}
保持Controller的专一性,一个view定义一个controller,尽量不要在其它view中使用这个controller。把可重用的逻辑放到factory中,保证controller只服务于当前视图
独立的数据调用(Data Services):
- 把进行数据操作和数据交互的逻辑放到factory中,数据服务负责XHR请求、本地存储、内存存储和其它任何数据操作
- 数据服务被调用时(例如controller),隐藏调用的直接行为
- 数据调用返回一个Promise
Directives
- 一个dirctive一个文件
- 提供一个唯一的Directive前缀,格式:{namespace}-指令名称
压缩处理(防止压缩导致出错):
手动添加依赖
angular
.module('app')
.controller('Dashboard', Dashboard); Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice']; function Dashboard($location, $routeParams, common, dataservice) {
}
Controller命名: 使用UpperCamelCase(每个单词首字母大写)的方式;后缀使用Controller;例如:AvengersController
Service命名: 对service和factory使用camel-casing(驼峰式,第一个单词首字母小写,后面单词首字母大写)方式。避免使用$前缀。
Directive组件命名: 使用camel-case方式,用一个短的前缀来描述directive在哪个区域使用(一些例子中是使用公司前缀或是项目前缀)
Angularjs书写规范的更多相关文章
- CSS书写规范、命名规范、网易CSS框架NEC
网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范: CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...
- html和css书写规范
HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...
- 数据库DDL语句书写规范
数据库DDL语句书写规范 1.SQL语句编写说明编写SQL语句应遵循统一的规范,包括大小写.空格.换行.缩进等等,只有完全一样的SQL才能在数据库中共享,从而减少硬解析. 字段类型.长度:根据数据情况 ...
- CSS书写规范
一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- css命名书写规范小结。
单行形式书写风格的排版约束 1. 每一条规则的大括号 { 前后加空格 2. 多个selector共用一个样式集,则多个selector必须写成多行形式 3. 每一条规则结束的大括号 } 前 ...
- CSS书写规范及顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...
- [Java拾遗一] XML的书写规范与解析.
前言今天天气大好, 起了个大早开始总结一些常用的基础知识. XML一直来说都很陌生, 使用大多是用于配置文件, 之前并没有细究过其中的约束规范, 今天刚好没事来学习并总结下. 1,XML基础介绍 XM ...
随机推荐
- 强大的性能监控pidstat
前言 pidstat 可以监控单个任务.比如CPU.内存.IO.上下文切换.详细参考 man pidstat 安装 yum install sysstat 使用 1.监控所有活动进程 pidstat ...
- 请实现一个函数,将一个字符串中的每个空格替换成“%20”。例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。
一.题目描述 请实现一个函数,将一个字符串中的空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 二.解题思路 1)简单暴力解法 ...
- php time()函数 语法
php time()函数 语法 time()函数怎么用? php time()函数用来返回当前时间的unix时间戳.语法是time(),返回自从 Unix 纪元(格林威治时间 1970 年 1 月 1 ...
- 兼容新旧浏览器的flex写法
拷贝直接加类名即可 /* 定义 */ .flex-def { display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older W ...
- RzPageControl(pagecontrol)
实现多标签的动态添加,切换,关闭 使用RzPageControl来实现多标签页使用菜单来打开标签页,通过标签页的caption来判断将标签页是否已经被打开过了.1.创建标签页,并判断是否是已经打开过的 ...
- 送礼物(二分加双向DFS)
题目链接 题意:给你n个礼物重量,给你一个M力量,看你一次性搬动不超过M的礼物重量. 思路:看似背包,但M太大.所以要用DFS,但n也有45,所以考虑双向DFS先搜前半部分满足情况的所有重量,然后去重 ...
- TopCoder - 15135 LongPalindromes
https://vjudge.net/problem/TopCoder-15135 之前做过:本质不同的回文子序列个数 本题:位置不同即为不同. 如果还是设$f[l][r]$表示$l$,$r$结尾,就 ...
- [CSP-S模拟测试62]题解
A.Graph 因为点可以随便走,所以对于每个联通块,答案为边数/2向下取整. 用类似Tarjan的方式,对于每个联通块建立一棵搜索树,尽量让每一个节点的儿子两两配对,如果做不到就用上头顶的天线. # ...
- 探索Redis设计与实现1:Redis 的基础数据结构概览
本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...
- VMware 虚拟机NAT模式如何设置网络连接,从头到尾全过程~!!
一.首先查看自己的虚拟机服务有没有开启,选择电脑里面的服务查看: 1.计算机点击右键选择管理 2.进入管理选择VM开头的服务如果没有开启的话就右键开启 二.虚拟机服务开启后就查看本地网络虚拟机的网 ...