这是慕课网上的实战课程，使用的技术栈有bower+less+angular1.x+gulp。没有涉及到后端，数据是模拟的json数据。

gulp

其中gulp的配置在这里。

less

关于less部分，只使用了一些最基础的语法。如下：

• 文件引用

使用@import。

@import 'a.less';
@import 'b.less';

• 定义变量

使用的了一个文件variabel.less专门用来定义变量。在less中定义变量使用@。定义完成后以分号结束。

@defaultColor: #fff;
@defaultWidth: 400px;

这样在其他文件里，这要引入了这个文件，就可以使用这些变量。

@import 'variable.less';
body {color: @defaultColor;
}
.box {width: @defaultWidth;
}

• 样式的嵌套

&表示引用自己。

body {color: @defaultColor;.box {background: red;&:hover {background: green;}}
}

• unit函数

该函数用来删除或更换单位。
参数：

1. dimension: 带单位或不带单位的数字。
2. unit: (可选) 目标单位，如果省略此参数，则删除单位。

案例： unit(5, px)输出： 5px案例： unit(5em)输出： 5

• 函数
  定义一个函数，如下：

.pt(@px) {padding-top: unit(@px / 37.5, rem);
}

在使用的使用调用这个并传入参数即可。

.box {.pt(20);
}

angular部分

angular使用的插件有：

• angular-ui-router
• angular-validation
• angular-cookie
• angular-animate

// app.js
angular.module('app', ['ui.router', 'ngCookies', 'validation', 'ngAnimate'])

在ui-router中，首先是定义路由，如下：

angular.module('app')
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {$stateProvider.state('main', { // main是当前页面的id，以后要跳转到该页面使用ui-sref="main"或者$state.go('main');url: '/main',templateUrl: 'view/mian.html',controller: 'mainCtrl'}).state('login', {// 定义其他路由等})// 除了上述路由外，处理其他不匹配的路由$urlRouterProvider.otherwise('main');
}])

ui-sref

使用ui-router自带的ui-sref属性来定义将要跳转的页面的id。

<li ui-sref="main">跳转到main页面</li>

如果要传入参数，如下格式。（）中的对象反映的是传入的参数键值对。

<li ui-sref="position({id: item.id})">跳转到position页面</li>

在position页面对应的控制器中，通过$state.params.id取得查询键。

angular.module('app')
.controller('positionCtrl', ['$http', '$state', '$scope', function($http, $state, $scope) {$http.get('data/position.json', {params: {id: $state.params.id}}).then(function() {}, function() {})
}])

可以通过ui-sref-active给选中的标签添加样式。比如菜单栏。

指令中的scope

关于指令中的scope请看这里，内容较多，我单独列了出来。

$index/$last

在使用ng-repeat渲染元素时，可以使用两个内置的属性观察渲染情况。$scope.$index来查看渲染的子元素的索引，$scope.$last（boolean）来查看是否执行完成，如果是true，表示ng-repeat执行完毕。

<button ng-click="showPositionList($index)" ng-repeat="cls in com.positionClass" ng-bind="cls.name"></button>

这个类似于导航栏的按钮，点击后控制器拿到这个$index，根据不同的$index传递给view层不同的数据。

$id/$parent$root

在任何一个控制器中，通过$scope.$id，$scope.$parent，$scope.$root来表示当前作用域的id，父作用域，根作用域。

通常在angular应用的run方法中定义根作用域相关属性。

angular.module('app',[]) // 必须引入ng-route
//config方法在整个页面中最先执行，先于run，
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {// 在这里配置路由
}])
// 通常将路由事件定义在根作用域下
.run(function($rootScope) {
//console.log($rootScope);$rootScope.$on('$routeChangeStart', function () {console.log(this)console.log(arguments);})
})

value()和constant()

使用constant()来保存一个常量。
使用value()函数来缓存全局变量（需要的时候可以直接使用）。

constant()和value()方法之间一个最主要的区别是，常量可以注入到配置函数（.config()）中，而值不行。

angular.module('app')
.constant('apikey', 'real')

angular.module('app')
.value('dict', {}) // 缓存全局变量
.run(['dict', '$http', function(dict, $http) {$http.get('data/city.json').then(function(res) {dict.city = res.data;})$http.get('data/salary.json').then(function(res) {dict.salary = res.data;})$http.get('data/scale.json').then(function(res) {dict.scale = res.data;})
}])

自定义过滤器

<!--过滤item-->
<li ng-repeat="item in data | filterByObj:filterObj">

filterByObj是一个已经定义好的过滤器。它返回的函数中有两个参数，第一个list表示上述的data，第二个obj表示filterByObj:后面的filterObj。这个filterObj对应父作用域的一个属性，根据情况而改变。从而达到筛选效果。

angular.module('app')
.filter('filterByObj', [function() {return function(list, obj) {var result = [];angular.forEach(list, function(item) {var isEqual = true;for(var e in obj) {if(item[e] !== obj[e]) {isEqual = false;            }}if(isEqual) {result.push(item);}})return result;}
}])

$interval

var interval = $interval(fn, timedelay)
$inteval.cancel(interval); // 使用cancel取消这个定时器
// 在原生js中是interval = null;

阻止冒泡

ng-click事件有一个事件对象$event。stopPropagation不需要加括号。

<li ng-click="$event.stopPropagation;select(item);"></li>

$watch

如果在指令中用到了某个属性，但是这个属性的值依赖于异步返回的结果，这时候就需要$watch这个值。否则报错。

// 1 父作用域
<div app-company com="company"></div>
// 这是副作用域控制器执行的
$http.get('data/company.json?id='+id).then(function(res){$scope.company = res.data;
})// 2
angular.module('app')
.directive('appPositionClass', [function() {return {restrict: 'A',replace: true,templateUrl: 'view/template/positionClass.html',scope: {com: '='},link: function($scope, element, attr) {$scope.$watch('com', function(newVal, oldVal, scope) {if(newVal){$scope.showPositionList(0);}})}}
}])

可以看到指令要想获得com属性，依赖于父作用域的$scope.company。而通过一个异步操作才能返回。所以指令中就$watch这个变量。

angular-validation

首先在index.html页面中引入angular-validation.js，然后再angular.module(‘app’, [‘validation’])加上依赖。

这个插件定义了一个$validationProvider服务。用来设置表达式和验证消息。

// validation.js
angular.module('app')
.config(['$validationProvider', function($validationProvider) {var expression = {phone: /^1\d{10}$/,password: function(value) {return value.length > 5;},required: function(value) {return !!value;}}var defaultMsg = {phone: {success: '',error: '11位手机号'},password: {success: '',error: '长度至少6位'},required: {success: '',error: '不能为空'}}$validationProvider.setExpression(expression).setDefaultMsg(defaultMsg);
}])

在login页面中，做了简单的验证。

<div class="login"><form class="d-b ta-c" name="form"><div class="form-line ta-l p-r"><span class="icon account va-t d-ib"></span><input name="phone" validator="required,phone" ng-model="user.phone" class="d-ib" type="text" placeholder="输入手机号"></div><div class="form-line ta-l p-r"><span class="icon lock va-t d-ib"></span><input name="password" validator="required,password" ng-model="user.password" class="d-ib" type="password" placeholder="输入密码"></div><button class="login-btn" validation-submit="form" ng-click="submit();">登录</button><button class="register-btn" ui-sref="register">注册</button></form>
</div>

注意input的validator属性，这里是验证的表达式的内容，如果有多个，使用逗号隔开。这个内容对应validation.js中的var expression中的键。
注意<button validation-submit="form" ng-click="submit"></button>这里，form是表单的name属性。

factory/service

我们使用factory或者service定义服务。service使用this来保存服务内容，类似构造函数。而factory使用返回值来保存服务内容。我们定义了一个cache服务。$cookies是angular-cookies插件提供的。两种写法如下：

// app.js中
angular.module('app', ['ui.router', 'ngCookies', 'validation', 'ngAnimate']);

服务：

angular.module('app')
.service('cache', ['$cookies', function($cookies) {this.put = function(key, value) {$cookies.put(key, value);};this.get = function(key) {return $cookies.get(key);};this.remove = function(key) {return $cookies.remove(key);}
}])

angular.module('app')
.factory('cache', ['$cookies', function($cookies) {return {put: function(key, value) {$cookies.put(key, value);},get: function(key) {return $cookies.get(key);},remove: function(key) {return $cookies.remove(key);}}
}])

讲真，我觉得使用这个不如使用localStorage，简单快捷（涉及到sessionID用cookie？）。

装饰器

装饰器是非常强大的，它不仅可以应用在我们的我们自己的服务上，也可以对AngularJS的核心服务进行拦截、中断甚至替换功能的操作。事实上AngularJS中很多功能的测试就是借助$provide.decorator()建立的。

由于这个项目没有后端，为了模拟post请求，我们需要修改$http内置的post请求。

angular.module('app')
.config(['$provide', function($provide) {$provide.decorator('$http', ['$delegate', '$q', function($delegate, $q) {$delegate.post = function(url, data, config) {var def = $q.defer();$delegate.get(url).then(function(res) {def.resolve(res.data);}, function(err) {def.reject(err);})return {success: function(cb) {def.promise.then(cb);},error: function(cb) {def.promise.then(null, cb);}}}return $delegate;}])
}])

decorator()函数可以接受两个参数。

• name （字符串）将要拦截的服务名称
• decoratorFn（函数）在服务实例化时调用该函数，这个函数由injector.invoke调用，可以将服务注入这个函数中。

$delegate是可以进行装饰的最原始的服务，为了装饰其他服务，需要将其注入进装饰器。

$q

内置的$q服务用来在Angular中创建promise。如上所述，我们使用$q.deffer()创建一个延迟对象def。通常返回时通过return def.promise得到一个promise对象。这里更进一步封装了。

上述的def使用了两种方法，分别是：

• def.resolve(data)
• def.reject(err)
• def.notify(data) 上述未提到

如果返回值是def.promise，它的then方法有三个参数。

var promise = $http.post(someurl);
promise.then(function(data) {alert('success');
}, funciton(err) {alert('failed');
}, function(dataUpdate) {alert('update')
})

更加详细的在：
浅谈Angular的 $q, defer, promise

总结

github地址

晚上花了几个小时写了总结，学完这个项目之后，确实学到了很多。在写博客的过程中，为了表述完全，又特定找了一些资料，看以前的代码。更加深了理解。

从今以后，每写一个项目都要做一次总结。