Best Practice AngularJS
/* 用几组简明扼要的代码段及其说明, 展示良好的编程行为, angularjs */
// app.module.js
angular
.module('app', ['ngRoute']);
// logger.js
(function() {
'use strict';
angular
.module('app')
.factory('logger', logger);
function logger() { }
})();
/*
Single Responsibility 单一责任的文件,小函数
* 1个组件, 1个文件, <400LOC (代码行)
* Small Functions,小函数 < 75LOC(1屏幕), 易于重用,维护和测试
用IIFE减少全局变量
* 类和组件, 要包裹在IIFE里面, (立即执行的函数表达式) Immediately Invoked Function Expression .
*减少全局变量, 从而减少这些变量的寿命,和重名
Modules模块定义
避免产生额外的全局变量:
* 在定义module的时候, 用chain,不要用setter语法引入中间变量,
* 在引用module的时候, 用chain + getter语法, 不定义中间变量。
* 一个module只能创建1次, 多次引用
* 用有名函数, 不要用callback, 以避免Nested的callback
*/
/* 在view中:
<div ng-controller="CustomerProductController as ProductVm">
<input ng-model="ProductVm.title"/>
</div>
*/
angular
.module('app')
.controller('CustomerProductController', CustomerProductController);
CustomerProductController.$inject = ['dataservice', 'logger'];
function CustomerProductController($scope, dataservice, logger) {
var vm = this;
vm.refresh = refresh;
vm.search = search;
vm.sessions = [];
vm.title = 'Sessions';
////////////
function refresh() {
}
function search() {
}
$scope.$watch('vm.title', function(current, original) {
$log.info('vm.title was %s', original);
$log.info('vm.title is now %s', current);
});
}
// route-config.js
angular
.module('app')
.config(config);
function config($routeProvider) {
$routeProvider
.when('/customerProduct', {
templateUrl: 'customerProduct.html',
controller: 'CustomerProductController',
controllerAs: 'productVm'
});
}
/*
Controllers
* 在view中用as语法代替$scope, 类似于new一个实例,接近本色的.语法., 避免$parent,
* 在controller自身中, 用vm(view Modal)代替this,避免歧义,并减少$scope,(仅仅剩余在$emit, $broadcast, $on, $watch等少数情况下,必须用$scope)
* 把bindable函数写在前面, 并按照字母排序, 具体的实现放在后面(如果实现只有1行,可以直接写)。
让重要的函数一览无余, 而且与函数的顺序无关。
* 薄controller, 厚service: 尽量把controller的逻辑下放到services,便于重用,和unit test
* 让controller专注到1个view, 不要重用,因为UI经常变,(而让可重用部分下放给service)
* 在route中定义controller和view,而避免在view中直接指定controller(绑死了),这样, 可以灵活地在route中重用view与controller。
*/
// service全部改用factory
angular
.module('app')
.service('logger', logger);
function logger() {
this.logError = function(msg) {
};
}
// factory
angular
.module('app')
.factory('logger', logger);
function logger() {
return {
logError: function(msg) {
}
};
}
/*
Services
* 用factory代替service,
以简化,并保持一致性。
因为,所有的service都是singleton,而且用new来实例化。
*/
function dataService($http, $location, $q, exception, logger) {
var isPrimed = false;
var primePromise;
var service = {
getAvengers: getAvengers,
ready: ready
};
return service;
////////////
function getAvengers() {
}
function ready(nextPromises) {
// implementation details go here
}
}
/*
Factories
* 与Controller一样的地方:(任务要单一, 接口函数放在前面)
* factory都是singleton, 返回的object包括了其所有接口函数
*/
// dataService.js
angular
.module('app.core')
.factory('dataService', dataService);
dataService.$inject = ['$http', 'logger'];
function dataService($http, logger) {
return {
getAvengers: getAvengers
};
function getAvengers() {
return $http.get('/api/maa')
.then(getAvengersComplete)
.catch(getAvengersFailed);
function getAvengersComplete(response) {
return response.data.results;
}
function getAvengersFailed(error) {
logger.error('XHR Failed for getAvengers.' + error.data);
}
}
}
// controller.js
angular
.module('app.avengers')
.controller('AvengersController', AvengersController);
AvengersController.$inject = ['dataService', 'logger'];
function AvengersController(dataService, logger) {
var vm = this;
vm.avengers = [];
activate();
function activate() {
return getAvengers().then(function() {
logger.info('Activated Avengers View');
});
}
function getAvengers() {
return dataService.getAvengers()
.then(function(data) {
vm.avengers = data;
return vm.avengers;
});
}
}
/*
Data操作全部用Service
* 抽出data操作, 例如:http, local storage, db都纳入service中, (不要放在controller中)
* 返回promise, 以利于chain操作
*/
// 对于controller和service
AvengersController.$inject = ['moviesPrepService'];
// 对于 route
function config($routeProvider) {
$routeProvider
.when('/avengers', {
templateUrl: 'avengers.html',
controller: 'AvengersController',
controllerAs: 'vm',
resolve: {
moviesPrepService: moviesPrepService
}
});
}
moviesPrepService.$inject = ['movieService'];
function moviesPrepService(movieService) {
return movieService.getMovies();
}
/*
Manual Annotating for Dependency Injection: 手工注入, 让minify安全
*/
/*
其余主题:
Minification and Annotation: 注释,适合minify的
Exception Handling
*/
/* Naming: 命名规范
featureType.js
*/
用几个代码段, 和 简要的 原则注释, 来直观地展示编程好习惯。
angularjs1,2的
js的
dom的
类和子类的
module的
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
https://github.com/johnpapa/angular-styleguide/blob/master/i18n/zh-CN.md