这是慕课网上的实战课程，使用的技术栈有bower+less+angular1.x+gulp。没有涉及到后端，数据是模拟的json数据。
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函数
该函数用来删除或更换单位。
参数：
- dimension: 带单位或不带单位的数字。
- 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
总结
晚上花了几个小时写了总结，学完这个项目之后，确实学到了很多。在写博客的过程中，为了表述完全，又特定找了一些资料，看以前的代码。更加深了理解。
从今以后，每写一个项目都要做一次总结。
扫一扫
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
