Best Practice AngularJS
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
