前端开发框架总结之Angular实用技巧（三）
上文讲了Angular中页面刷新和数据绑定的一些知识点，了解了这些之后让你对页面和js中的数据同步做到随心所欲，解决各种页面刷新不出来，变量不生效等问题，同时你还可以利用自定义指令让项目变得更加组件化、智能化、简单化。今天我们再来介绍下angular路由相关的知识。
-
angular路由
angular自带的路由个人觉得不够灵活，所有项目中一直使用的是angular-ui-router.js插件。（插件可自行去github上下载）
要使用路由插件，需要在module中注入ui.router模块。
接下来是使用$stateProviderd进行路由的配置。主要包括路由的name，url，templateUrl,controller,params,resolve这几个属性。其中：name为路由的名称，在路由跳转的时候会用到。
url为路由的地址，这个对应浏览器地址栏中显示的url。
templateUrl为路由模板地址。这个是该路由会加载的页面片段对应的html文件路径。
controller为改路由对应的控制器。
params为路由加载是附带传递的参数。
resolve为返回的是一个key-value的对象，value是一个可以依赖注入的函数，函数的返回是一个promise，我们可以利用这个特性对页面js进行懒加载。
js代码片段
.state('home.detailS.built', {
url: '/views/detailS/built',//服务管理-编译管理
templateUrl: 'views/service/service/built.html',
controller: 'builtCtrl',
params: {
"serviceName": null
},
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([
'script/controllers/service/service/detailS.js' + '?ver=' + 1508388363809
]);
}]//使用参数注入方式，避免压缩后参数有问题
}
})要进行路由的加载还需要在HTML页面进行相应的配置。
示例代码如下：
<body ng-controller="indexCtrl">
<div id="content" ui-view ></div>
</body>路由会替换页面中的ui-view部分的内容。
路由的跳转方法如下：
$state.go(name, opt);其中name是路由的名称，opt是路由中所携带的参数。
默认路由的设置方式如下：
$urlRouterProvider.otherwise('/index/login');路由的拦截方式如下：
app.run(['$transitions','$state',function($transitions,$state){
$transitions.onBefore({},function(transition){
var result = 1;
if(result == 1){
$state.go('login');
transition.abort();
}
else if(result == 0){
alert('没有权限!');
transition.abort();
}
});
}]);多级路由的实现方法是通过路由名称的规则来实现的，举个例子home.detailS.built的命名方式极为一个三级路由对应的是三个ui-view的嵌套。
多级路由主要是主要scope域的概念就不难理解了。想理解的更深入还需要大家亲自动手配置一下才可以。