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 ...
随机推荐
- go语言从例子开始之Example13.函数多返回值
Go 内建多返回值 支持.这个特性在 Go 语言中经常被用到,例如用来同时返回一个函数的结果和错误信息. Example: package main import "fmt" // ...
- Codeforces 1185G2 Playlist for Polycarp (hard version) 背包,暴力
题意及思路:https://www.cnblogs.com/Als123/p/11061147.html 代码: #include <bits/stdc++.h> #define LL l ...
- error: device unauthorized.
1 执行 adb install com.taobao.taobao_250.apk 报错 2 先看手机是不是未授权,执行命令之后,手机回弹出授权信息,点击确认就行了
- 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...
- Go(二)函数
函数是一等公民 与其他主要编程语言的差异 1.可以有多个返回值 2.所有参数都是值传递 slice.map.channel会有传引用是错觉,如切片背后是数组,是一个数据结构,里面包含了指向对应数组的指 ...
- springColud父工程依赖配置
<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot ...
- boost pointer container
1. boost::ptr_vector #include <boost/ptr_container/ptr_vector.hpp> #include <iostream> i ...
- hibernate 双向1对多
1: 还是用客户Customer和订单Order来解释: “一对多”的物理意义:一个客户可以有多个订单,某个订单只能归宿于一个客户. “双向”的物理意义:客户知道自己有哪些订单,订单也知道自己归宿于哪 ...
- PHP curl_reset函数
curl_reset— 重置libcurl会话句柄的所有选项. 说明 void curl_reset ( resource $ch ) 该函数将重新初始化cURL的所有选项值(默认值). 注意:cur ...
- 使用java读取excel数据
package excelOperation2; import java.io.File; import java.io.FileNotFoundException; import java.util ...