AngularJS风格指南，对代码规范很有帮助

AngularJS风格指南

Community
Awesomeness and Credit

在示例App中了解这些风格

modular

目录

单一职责

规则一

app

/* avoid */
angular
.module('app', ['ngRoute'])
.controller('SomeController' , SomeController)
.factory('someFactory' , someFactory);

function SomeController() { }

function someFactory() { }

/* recommended */

// app.module.js
angular
.module('app', ['ngRoute']);

/* recommended */

// someController.js
angular
.module('app')
.controller('SomeController' , SomeController);

function SomeController() { }

/* recommended */

// someFactory.js
angular
.module('app')
.factory('someFactory' , someFactory);

function someFactory() { }

IIFE

IIFE

/* avoid */
// logger.js
angular
.module('app')
.factory('logger', logger);

// logger function is added as a global variable
function logger() { }

// storage.js
angular
.module('app')
.factory('storage', storage);

// storage function is added as a global variable
function storage() { }

/**
* recommended
*
* no globals are left behind
*/

// logger.js
(function() {
'use strict';

angular
.module('app')
.factory('logger', logger);

function logger() { }
})();

// storage.js
(function() {
'use strict';

angular
.module('app')
.factory('storage', storage);

function storage() { }
})();

Modules

避免命名冲突

定义(aka
Setters)

/* avoid */
var app = angular.module('app', [
'ngAnimate',
'ngRoute',
'app.shared',
'app.dashboard'
]);

/* recommended */
angular
.module('app', [
'ngAnimate',
'ngRoute',
'app.shared',
'app.dashboard'
]);

Getters

/* avoid */
var app = angular.module('app');
app.controller('SomeController' , SomeController);

function SomeController() { }

/* recommended */
angular
.module('app')
.controller('SomeController' , SomeController);

function SomeController() { }

Setting
vs Getting

angular.module('app', []);

angular.module('app');

命名函数
vs 匿名函数

/* avoid */
angular
.module('app')
.controller('Dashboard', function() { });
.factory('logger', function() { });

/* recommended */

// dashboard.js
angular
.module('app')
.controller('Dashboard', Dashboard);

function Dashboard () { }

// logger.js
angular
.module('app')
.factory('logger', logger);

function logger () { }

Controllers

controllerAs在View中的语法

controllerAs

controllerAs

经典的$scope语法

customer.name

name

$parent

<!-- avoid -->
<div ng-controller="Customer">
{{ name }}
</div>

<!-- recommended -->
<div ng-controller="Customer as customer">
{{ customer.name }}
</div>

controllerAs在controller中的语法

controllerAs

经典的$scope语法

controllerAs

$scope

this

controllerAs

$scope

$scope

$scope

$scope

$scope

$emit

$broadcast

$on

/* avoid */
function Customer ($scope) {
$scope.name = {};
$scope.sendMessage = function() { };
}

/* recommended - but see next section */
function Customer () {
this.name = {};
this.sendMessage = function() { };
}

controllerAs
with vm

controllerAs

this

vm

this

this

this

/* avoid */
function Customer() {
this.name = {};
this.sendMessage = function() { };
}

/* recommended */
function Customer () {
var vm = this;
vm.name = {};
vm.sendMessage = function() { };
}

/* jshint validthis: true */
var vm = this;

controller as

vm.*

$scope.$watch('vm.title', function(current, original) {
$log.info('vm.title was %s', original);
$log.info('vm.title is now %s', current);
});

可绑定成员放到顶部

/* avoid */
function Sessions() {
var vm = this;

vm.gotoSession = function() {
/* ... */
};
vm.refresh = function() {
/* ... */
};
vm.search = function() {
/* ... */
};
vm.sessions = [];
vm.title = 'Sessions';

/* recommended */
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() {
/* */
}

/* avoid */
function Sessions(data) {
var vm = this;

vm.gotoSession = gotoSession;
vm.refresh = function() {
/**
* lines
* of
* code
* affects
* readability
*/
};
vm.search = search;
vm.sessions = [];
vm.title = 'Sessions';

/* recommended */
function Sessions(dataservice) {
var vm = this;

vm.gotoSession = gotoSession;
vm.refresh = dataservice.refresh; // 1 liner is OK
vm.search = search;
vm.sessions = [];
vm.title = 'Sessions';

函数声明隐藏实现细节

a

b

var
a

var b

/**
* avoid
* Using function expressions.
*/
function Avengers(dataservice, logger) {
var vm = this;
vm.avengers = [];
vm.title = 'Avengers';

var activate = function() {
return getAvengers().then(function() {
logger.info('Activated Avengers View');
});
}

var getAvengers = function() {
return dataservice.getAvengers().then(function(data) {
vm.avengers = data;
return vm.avengers;
});
}

vm.getAvengers = getAvengers;

activate();
}

/*
* recommend
* Using function declarations
* and bindable members up top.
*/
function Avengers(dataservice, logger) {
var vm = this;
vm.avengers = [];
vm.getAvengers = getAvengers;
vm.title = '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;
});
}
}

推迟Controller中的逻辑

/* avoid */
function Order ($http, $q) {
var vm = this;
vm.checkCredit = checkCredit;
vm.total = 0;

function checkCredit () {
var orderTotal = vm.total;
return $http.get('api/creditcheck').then(function(data) {
var remaining = data.remaining;
return $q.when(!!(remaining > orderTotal));
});
};
}

/* recommended */
function Order (creditService) {
var vm = this;
vm.checkCredit = checkCredit;
vm.total = 0;

function checkCredit () {
return creditService.check();
};
}

保持Controller的专一性

分配Controller

ng-controller="Avengers as vm"

ng-controller

/* avoid - when using with a route and dynamic pairing is desired */

// route-config.js
angular
.module('app')
.config(config);

function config ($routeProvider) {
$routeProvider
.when('/avengers', {
templateUrl: 'avengers.html'
});
}

<!-- avengers.html -->
<div ng-controller="Avengers as vm">
</div>

/* recommended */

// route-config.js
angular
.module('app')
.config(config);

function config ($routeProvider) {
$routeProvider
.when('/avengers', {
templateUrl: 'avengers.html',
controller: 'Avengers',
controllerAs: 'vm'
});
}

<!-- avengers.html -->
<div>
</div>

Services

单例

new

this

// service

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) {
/* */
}
};
}

Factories

单一职责

单例

可访问的成员放到顶部

/* avoid */
function dataService () {
var someValue = '';
function save () {
/* */
};
function validate () {
/* */
};

return {
save: save,
someValue: someValue,
validate: validate
};
}

/* recommended */
function dataService () {
var someValue = '';
var service = {
save: save,
someValue: someValue,
validate: validate
};
return service;

////////////
function save () {
/* */
};

function validate () {
/* */
};
}

函数声明隐藏实现细节

a

b

var
a

var b

/**
* avoid
* Using function expressions
*/
function dataservice($http, $location, $q, exception, logger) {
var isPrimed = false;
var primePromise;

var getAvengers = function() {
// implementation details go here
};

var getAvengerCount = function() {
// implementation details go here
};

var getAvengersCast = function() {
// implementation details go here
};

var prime = function() {
// implementation details go here
};

var ready = function(nextPromises) {
// implementation details go here
};

var service = {
getAvengersCast: getAvengersCast,
getAvengerCount: getAvengerCount,
getAvengers: getAvengers,
ready: ready
};

return service;
}

/**
* recommended
* Using function declarations
* and accessible members up top.
*/
function dataservice($http, $location, $q, exception, logger) {
var isPrimed = false;
var primePromise;

var service = {
getAvengersCast: getAvengersCast,
getAvengerCount: getAvengerCount,
getAvengers: getAvengers,
ready: ready
};

return service;

////////////

function getAvengers() {
// implementation details go here
}

function getAvengerCount() {
// implementation details go here
}

function getAvengersCast() {
// implementation details go here
}

function prime() {
// implementation details go here
}

function ready(nextPromises) {
// implementation details go here
}
}

Data
Services

独立的数据调用

/* recommended */

// dataservice factory
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);
}
}
}

/* recommended */

// controller calling the dataservice factory
angular
.module('app.avengers')
.controller('Avengers', Avengers);

Avengers.$inject = ['dataservice', 'logger'];

function Avengers(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调用那里返回一个Promise

/* recommended */

activate();

function activate() {
/**
* Step 1
* Ask the getAvengers function for the
* avenger data and wait for the promise
*/
return getAvengers().then(function() {
/**
* Step 4
* Perform an action on resolve of final promise
*/
logger.info('Activated Avengers View');
});
}

function getAvengers() {
/**
* Step 2
* Ask the data service for the data and wait
* for the promise
*/
return dataservice.getAvengers()
.then(function(data) {
/**
* Step 3
* set the data and resolve the promise
*/
vm.avengers = data;
return vm.avengers;
});
}

Directives

一个文件限制一个

/* avoid */
angular
.module('app.widgets')

/* order directive that is specific to the order module */
.directive('orderCalendarRange', orderCalendarRange)

/* sales directive that can be used anywhere across the sales app */
.directive('salesCustomerInfo', salesCustomerInfo)

/* spinner directive that can be used anywhere across apps */
.directive('sharedSpinner', sharedSpinner);

function orderCalendarRange() {
/* implementation details */
}

function salesCustomerInfo() {
/* implementation details */
}

function sharedSpinner() {
/* implementation details */
}

/* recommended */
/* calendarRange.directive.js */

/**
* @desc order directive that is specific to the order module at a company named Acme
* @example <div acme-order-calendar-range></div>
*/
angular
.module('sales.order')
.directive('acmeOrderCalendarRange', orderCalendarRange);

function orderCalendarRange() {
/* implementation details */
}

/* recommended */
/* customerInfo.directive.js */

/**
* @desc spinner directive that can be used anywhere across the sales app at a company named Acme
* @example <div acme-sales-customer-info></div>
*/
angular
.module('sales.widgets')
.directive('acmeSalesCustomerInfo', salesCustomerInfo);

function salesCustomerInfo() {
/* implementation details */
}

/* recommended */
/* spinner.directive.js */

/**
* @desc spinner directive that can be used anywhere across apps at a company named Acme
* @example <div acme-shared-spinner></div>
*/
angular
.module('shared.widgets')
.directive('acmeSharedSpinner', sharedSpinner);

function sharedSpinner() {
/* implementation details */
}

限制DOM操作

ngShow

ngHide

提供一个唯一的Directive前缀

acmeSalesCustomerInfo

acme-sales-customer-info

acme-

ng-

ion-

限制元素和属性

E

A

E

EA

<!-- avoid -->
<div class="my-calendar-range"></div>

/* avoid */
angular
.module('app.widgets')
.directive('myCalendarRange', myCalendarRange);

function myCalendarRange () {
var directive = {
link: link,
templateUrl: '/template/is/located/here.html',
restrict: 'C'
};
return directive;

function link(scope, element, attrs) {
/* */
}
}

<!-- recommended -->
<my-calendar-range></my-calendar-range>
<div my-calendar-range></div>

/* recommended */
angular
.module('app.widgets')
.directive('myCalendarRange', myCalendarRange);

function myCalendarRange () {
var directive = {
link: link,
templateUrl: '/template/is/located/here.html',
restrict: 'EA'
};
return directive;

function link(scope, element, attrs) {
/* */
}
}

Directives和ControllerAs

controller as

controller
as

<div my-example max="77"></div>

angular
.module('app')
.directive('myExample', myExample);

function myExample() {
var directive = {
restrict: 'EA',
templateUrl: 'app/feature/example.directive.html',
scope: {
max: '='
},
link: linkFunc,
controller : ExampleController,
controllerAs: 'vm'
};
return directive;

ExampleController.$inject = ['$scope'];
function ExampleController($scope) {
// Injecting $scope just for comparison
/* jshint validthis:true */
var vm = this;

vm.min = 3;
vm.max = $scope.max;
console.log('CTRL: $scope.max = %i', $scope.max);
console.log('CTRL: vm.min = %i', vm.min);
console.log('CTRL: vm.max = %i', vm.max);
}

function linkFunc(scope, el, attr, ctrl) {
console.log('LINK: scope.max = %i', scope.max);
console.log('LINK: scope.vm.min = %i', scope.vm.min);
console.log('LINK: scope.vm.max = %i', scope.vm.max);
}
}

/* example.directive.html */
<div>hello world</div>
<div>max={{vm.max}}<input ng-model={vm.max"/></div>
<div>min={{vm.min}}<input ng-model={vm.min"/></div>

解决Controller的Promises

Controller
Activation Promises

activate

/* avoid */
function Avengers(dataservice) {
var vm = this;
vm.avengers = [];
vm.title = 'Avengers';

dataservice.getAvengers().then(function(data) {
vm.avengers = data;
return vm.avengers;
});
}

/* recommended */
function Avengers(dataservice) {
var vm = this;
vm.avengers = [];
vm.title = 'Avengers';

activate();

////////////

function activate() {
return dataservice.getAvengers().then(function(data) {
vm.avengers = data;
return vm.avengers;
});
}
}

Route
Resolve Promises

$routeProvider

/* avoid */
angular
.module('app')
.controller('Avengers', Avengers);

function Avengers (movieService) {
var vm = this;
// unresolved
vm.movies;
// resolved asynchronously
movieService.getMovies().then(function(response) {
vm.movies = response.movies;
});
}

/* better */

// route-config.js
angular
.module('app')
.config(config);

function config ($routeProvider) {
$routeProvider
.when('/avengers', {
templateUrl: 'avengers.html',
controller: 'Avengers',
controllerAs: 'vm',
resolve: {
moviesPrepService: function(movieService) {
return movieService.getMovies();
}
}
});
}

// avengers.js
angular
.module('app')
.controller('Avengers', Avengers);

function Avengers (moviesPrepService) {
var vm = this;
vm.movies = moviesPrepService.movies;
}

movieService

手动依赖注入

缩写的不安全性

common

dataservice

a

b

/* avoid - not minification-safe*/
angular
.module('app')
.controller('Dashboard', Dashboard);

function Dashboard(common, dataservice) {
}

/* avoid - not minification-safe*/
angular.module('app').controller('Dashboard', d);function d(a, b) { }

手动添加依赖

$inject

ng-annotate

ng-annotate

common

dataservice

a

b

/* avoid */
angular
.module('app')
.controller('Dashboard',
['$location', '$routeParams', 'common', 'dataservice',
function Dashboard($location, $routeParams, common, dataservice) {}
]);

/* avoid */
angular
.module('app')
.controller('Dashboard',
['$location', '$routeParams', 'common', 'dataservice', Dashboard]);

function Dashboard($location, $routeParams, common, dataservice) {
}

/* recommended */
angular
.module('app')
.controller('Dashboard', Dashboard);

Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice'];

function Dashboard($location, $routeParams, common, dataservice) {
}

ng-annotate
0.10.0

$inject

// inside a directive definition
function outer() {
return {
controller: DashboardPanel,
};

DashboardPanel.$inject = ['logger']; // Unreachable
function DashboardPanel(logger) {
}
}

// inside a directive definition
function outer() {
DashboardPanel.$inject = ['logger']; // reachable
return {
controller: DashboardPanel,
};

function DashboardPanel(logger) {
}
}

手动确定路由解析器依赖

$inject

/* recommended */
function config ($routeProvider) {
$routeProvider
.when('/avengers', {
templateUrl: 'avengers.html',
controller: 'Avengers',
controllerAs: 'vm',
resolve: {
moviesPrepService: moviePrepService
}
});
}

moviePrepService.$inject =  ['movieService'];
function moviePrepService(movieService) {
return movieService.getMovies();
}

压缩和注释

ng-annotate

/**
@ngInject */

ng-min

angular
.module('app')
.controller('Avengers', Avengers);

/* @ngInject */
function Avengers (storageService, avengerService) {
var vm = this;
vm.heroSearch = '';
vm.storeHero = storeHero;

function storeHero(){
var hero = avengerService.find(vm.heroSearch);
storageService.save(hero.name, hero);
}
}

$inject

angular
.module('app')
.controller('Avengers', Avengers);

/* @ngInject */
function Avengers (storageService, avengerService) {
var vm = this;
vm.heroSearch = '';
vm.storeHero = storeHero;

function storeHero(){
var hero = avengerService.find(vm.heroSearch);
storageService.save(hero.name, hero);
}
}

Avengers.$inject = ['storageService', 'avengerService'];

ng-annotate

@ngInject

$inject

ngApp

ngStrictDi

<body
ng-app="APP" ng-strict-di>

使用Gulp或Grunt结合ng-annotate

/*
@ngInject */

/* @ngInject
*/

gulp.task('js', ['jshint'], function() {
var source = pkg.paths.js;
return gulp.src(source)
.pipe(sourcemaps.init())
.pipe(concat('all.min.js', {newLine: ';'}))
// Annotate before uglify so the code get's min'd properly.
.pipe(ngAnnotate({
// true helps add where @ngInject is not used. It infers.
// Doesn't work with resolve, so we must be explicit there
add: true
}))
.pipe(bytediff.start())
.pipe(uglify({mangle: true}))
.pipe(bytediff.stop())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(pkg.paths.dev));
});

异常处理

修饰符

$provide

$exceptionHandler

/* recommended */
angular
.module('blocks.exception')
.config(exceptionConfig);

exceptionConfig.$inject = ['$provide'];

function exceptionConfig($provide) {
$provide.decorator('$exceptionHandler', extendExceptionHandler);
}

extendExceptionHandler.$inject = ['$delegate', 'toastr'];

function extendExceptionHandler($delegate, toastr) {
return function(exception, cause) {
$delegate(exception, cause);
var errorData = {
exception: exception,
cause: cause
};
/**
* Could add the error to a service's collection,
* add errors to $rootScope, log errors to remote web server,
* or log locally. Or throw hard. It is entirely up to you.
* throw exception;
*/
toastr.error(exception.msg, errorData);
};
}

异常捕获器

/* recommended */
angular
.module('blocks.exception')
.factory('exception', exception);

exception.$inject = ['logger'];

function exception(logger) {
var service = {
catcher: catcher
};
return service;

function catcher(message) {
return function(reason) {
logger.error(message, reason);
};
}
}

路由错误

$routeChangeError

/* recommended */
function handleRoutingErrors() {
/**
* Route cancellation:
* On routing error, go to the dashboard.
* Provide an exit clause if it tries to do it twice.
*/
$rootScope.$on('$routeChangeError',
function(event, current, previous, rejection) {
var destination = (current && (current.title || current.name || current.loadedTemplateUrl)) ||
'unknown target';
var msg = 'Error routing to ' + destination + '. ' + (rejection.msg || '');
/**
* Optionally log using a custom service or $log.
* (Don't forget to inject custom service)
*/
logger.warning(msg, [current]);
}
);
}

命名

命名原则

feature.type.js

avengers.controller.js

AvengersController

功能文件命名

feature.type.js

/**
* common options
*/

// Controllers
avengers.js
avengers.controller.js
avengersController.js

// Services/Factories
logger.js
logger.service.js
loggerService.js

/**
* recommended
*/

// controllers
avengers.controller.js
avengers.controller.spec.js

// services/factories
logger.service.js
logger.service.spec.js

// constants
constants.js

// module definition
avengers.module.js

// routes
avengers.routes.js
avengers.routes.spec.js

// configuration
avengers.config.js

// directives
avenger-profile.directive.js
avenger-profile.directive.spec.js

controller

avengers.controller.js

avengers.js

/**
* recommended
*/
// Controllers
avengers.js
avengers.spec.js

测试文件命名

spec

/**
* recommended
*/
avengers.controller.spec.js
logger.service.spec.js
avengers.routes.spec.js
avenger-profile.directive.spec.js

Controller命名

/**
* recommended
*/

// avengers.controller.js
angular
.module
.controller('HeroAvengers', HeroAvengers);

function HeroAvengers(){ }

Controller命名后缀

Controller

Controller

/**
* recommended: Option 1
*/

// avengers.controller.js
angular
.module
.controller('Avengers', Avengers);

function Avengers(){ }

/**
* recommended: Option 2
*/

// avengers.controller.js
angular
.module
.controller('AvengersController', AvengersController);

function AvengersController(){ }

Factory命名

/**
* recommended
*/

// logger.service.js
angular
.module
.factory('logger', logger);

function logger(){ }

Directive组件命名

/**
* recommended
*/

// avenger.profile.directive.js
angular
.module
.directive('xxAvengerProfile', xxAvengerProfile);

// usage is <xx-avenger-profile> </xx-avenger-profile>

function xxAvengerProfile(){ }

模块

app.module.js

admin.module.js

app

admin

app.js

app.js

配置

app

app.config.js

config.js

admin.module.js

admin.config.js

路由

app.route.js

admin

admin.route.js

admin.config.route.js

应用程序结构的LIFT准则

LIFT

L

I

F

T

Locate

/bower_components
/client
/app
/avengers
/blocks
/exception
/logger
/core
/dashboard
/data
/layout
/widgets
/content
index.html
.bower.json

Identify

Flat

T-DRY（尽量坚持DRY）

应用程序结构

总指南

app

bower_components

scripts

lib

Layout

layout

按功能划分文件夹结构

/**
* recommended
*/

app/
app.module.js
app.config.js
app.routes.js
directives/
calendar.directive.js
calendar.directive.html
user-profile.directive.js
user-profile.directive.html
services/
dataservice.js
localstorage.js
logger.js
spinner.js
layout/
shell.html
shell.controller.js
topnav.html
topnav.controller.js
people/
attendees.html
attendees.controller.js
speakers.html
speakers.controller.js
speaker-detail.html
speaker-detail.controller.js
sessions/
sessions.html
sessions.controller.js
session-detail.html
session-detail.controller.js

/*
* avoid
* Alternative folders-by-type.
* I recommend "folders-by-feature", instead.
*/

app/
app.module.js
app.config.js
app.routes.js
directives.js
controllers/
attendees.js
session-detail.js
sessions.js
shell.js
speakers.js
speaker-detail.js
topnav.js
views/
attendees.html
session-detail.html
sessions.html
shell.html
speakers.html
speaker-detail.html
topnav.html
services/
dataservice.js
localstorage.js
logger.js
spinner.js

模块化

许多小的、独立的模块

创建一个App
Module

保持App
Module的精简

功能区域就是模块

可重用的块就是模块

模块依赖

app.core

app.core

启动逻辑

配置

angular
.module('app')
.config(configure);

configure.$inject =
['routerHelperProvider', 'exceptionHandlerProvider', 'toastr'];

function configure (routerHelperProvider, exceptionHandlerProvider, toastr) {
exceptionHandlerProvider.configure(config.appErrorPrefix);
configureStateHelper();

toastr.options.timeOut = 4000;
toastr.options.positionClass = 'toast-bottom-right';

////////////////

function configureStateHelper() {
routerHelperProvider.configure({
docTitle: 'NG-Modular: '
});
}
}

运行块

angular
.module('app')
.run(runBlock);

runBlock.$inject = ['authenticator', 'translator'];

function runBlock(authenticator, translator) {
authenticator.initialize();
translator.initialize();
}

Angular
$包装服务

$document和$window

$document

$window

document

window

$timeout和$interval

$timeout

$interval

setTimeout

setInterval

测试

用故事来编写测试

it('should have Avengers controller', function() {
//TODO
});

it('should find 1 Avenger when filtered by name', function() {
//TODO
});

it('should have 10 Avengers', function() {}
//TODO (mock data?)
});

it('should return Avengers via XHR', function() {}
//TODO ($httpBackend?)
});

// and so on

测试库

测试运行器

Stubbing和Spying

Headless
Browser

代码分析

*为什么？*：测试也是代码，JSHint能够帮你识别代码中可能导致测试无法正常工作的的质量问题。

对测试降低全局JSHint规则

describe

expect

/*global sinon, describe, it, afterEach, beforeEach, expect, inject */

动画

用法

Sub
Second

animate.css

注释

jsDoc

jsDoc

@namespace

@memberOf

/**
* Logger Factory
* @namespace Factories
*/
(function() {
angular
.module('app')
.factory('logger', logger);

/**
* @name logger
* @namespace Logger
* @desc Application wide logger
* @memberOf Factories
*/
function logger ($log) {
var service = {
logError: logError
};
return service;

////////////

/**
* @name logError
* @desc Logs errors
* @param {String} msg Message to log
* @returns {String}
* @memberOf Factories.Logger
*/
function logError(msg) {
var loggedMsg = 'Error: ' + msg;
$log.error(loggedMsg);
return loggedMsg;
};
}
})();

JS
Hint

使用一个选项文件

{
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"es3": false,
"forin": true,
"freeze": true,
"immed": true,
"indent": 4,
"latedef": "nofunc",
"newcap": true,
"noarg": true,
"noempty": true,
"nonbsp": true,
"nonew": true,
"plusplus": false,
"quotmark": "single",
"undef": true,
"unused": false,
"strict": false,
"maxparams": 10,
"maxdepth": 5,
"maxstatements": 40,
"maxcomplexity": 8,
"maxlen": 120,

"asi": false,
"boss": false,
"debug": false,
"eqnull": true,
"esnext": false,
"evil": false,
"expr": false,
"funcscope": false,
"globalstrict": false,
"iterator": false,
"lastsemic": false,
"laxbreak": false,
"laxcomma": false,
"loopfunc": true,
"maxerr": false,
"moz": false,
"multistr": false,
"notypeof": false,
"proto": false,
"scripturl": false,
"shadow": false,
"sub": true,
"supernew": false,
"validthis": false,
"noyield": false,

"browser": true,
"node": true,

"globals": {
"angular": false,
"$": false
}
}

常量

供应全局变量

// constants.js

/* global toastr:false, moment:false */
(function() {
'use strict';

angular
.module('app.core')
.constant('toastr', toastr)
.constant('moment', moment);
})();

AngularJS文档

文件模板和片段

Sublime
Text

TAB

ngcontroller // creates an Angular controller
ngdirective // creates an Angular directive
ngfactory // creates an Angular factory
ngmodule // creates an Angular module

Visual
Studio

- 下载Visual Studio扩展文件[SideWaffle](http://www.sidewaffle.com)
- 运行下载的vsix文件
- 重启Visual Studio

WebStorm

File

Import Settings

OK

TAB

ng-c // creates an Angular controller
ng-f // creates an Angular factory
ng-m // creates an Angular module

贡献

过程

1. 在一个Issue中讨论这个问题。
1. 打开一个pull request，引用这个问题，解释你做的修改和为什么要这样做。
1. pull request将会被进行评估，结果就是合并或是拒绝。

许可证

(MIT许可证)