文件命名原则:
- 遵循以描述组件功能,然后是类型(可选)的方式来给所有的组件提供统一的命名
- 命名: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在哪个区域使用(一些例子中是使用公司前缀或是项目前缀)