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 ...
随机推荐
- AtCoder Beginner Contest 130 F Minimum Bounding Box 三分法求极值(WA)
题意:给n个点的起始坐标以及他们的行走方向,每一单位时间每个点往它的方向移动一单位.问最小能包围所有点的矩形. 解法:看到题目求极值,想了想好像可以用三分法求极值,虽然我也不能证明面积是个单峰函数. ...
- 如何通过命令行编写调试第一个C++程序(UNIX)
1.文件保存以.cc,.cpp等结尾: 2.bash窗口调试命令:cc prog1.cc,编译器生成可执行问价,Unix系统中为a.out,windows中一般以filename.exe; 3.(1) ...
- jquery 弹出框效果
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- 【串线篇】SpringMVC九大组件
SpringMVC中的Servlet一共有三个层次,分别是HttpServletBean.FrameworkServlet和 DispatcherServlet. HttpServletBean直接继 ...
- CNN基础一:从头开始训练CNN进行图像分类(猫狗大战为例)
本文旨在总结一次从头开始训练CNN进行图像分类的完整过程(猫狗大战为例,使用Keras框架),免得经常遗忘.流程包括: 从Kaggle下载猫狗数据集: 利用python的os.shutil库,制作训练 ...
- Python中yaml和json文件的读取和应用
Python对yaml和json文件的读取: yaml文件读取: 首先创建一个yaml文件test.yaml import yaml #引入包 f=open(path) #建立Python的文件 ...
- Day One-Python基础
Python第一节 安装教程就不发了,太心累了!大家可以上百度查,网上都会有 python种类 JavaPython cPython pypy 两种编码 字节码 和 机器码 unicode utf8 ...
- Qt的信号和槽机制
一.信号和槽机制 信号和槽用于两个对象之间的通信,我们希望任何对象都可以和其他对象进行通信. 当一个特殊的事情发生时便可以发射一个信号,而槽就是一个函数,它在信号发射后被调用来相应这个信号.( ...
- RzPageControl(pagecontrol)
实现多标签的动态添加,切换,关闭 使用RzPageControl来实现多标签页使用菜单来打开标签页,通过标签页的caption来判断将标签页是否已经被打开过了.1.创建标签页,并判断是否是已经打开过的 ...
- react教程 — 开发 总结
本文章是在熟练使用 VUE 的基础上,对比VUE 功能进行的一个技术总结. 1.react项目快速搭建 https://blog.csdn.net/mapbar_front/article/deta ...