AngularJS基于ui-route实现深层路由的方法【路由嵌套】
发布于 2017-06-29 03:38:45 | 194 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的AngularJS开发指南，程序狗速度看过来！
AngularJS 前端JS框架
AngularJS诞生于Google是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。
这篇文章主要介绍了AngularJS基于ui-route实现深层路由的方法,涉及AngularJS路由嵌套操作相关实现步骤与技巧,需要的朋友可以参考下
本文实例讲述了AngularJS基于ui-route实现深层路由的方法。分享给大家供大家参考，具体如下：
1.前面我们通过了简单的ng-route实现了简单层次的路由，对于深层次的路由，我们可以通过ui-route来实现。
（1）ng-route的局限性：一个页面无法嵌套多个视图，也就是说一个页面只能有包含一个页面一个控制器的切换。
（2）ui-route的改进：在具有富客户端的单页应用中，要在一个页面中呈现不同的视图，我们可以通过ui-route实现路由的嵌套。
2 . ui-route的使用方法
（1）首先加载angular-ui-route.js
<script src="js/angular-ui-router.js"></script>
（2）设置HTML页面，这里不同于ng-route中的ng-view
<ul>
<li><a ui-sref="index">首页</a></li>
<li><a ui-sref="fruit">水果</a></li>
<li><a ui-sref="vegetable">蔬菜</a></li>
</ul>
（3）在JS中配置路由
（因为chorme不支持本地文件访问，而FF支持，这里不想搭建本地服务器的，可以用火狐浏览器调试）
配置路由的代码如下：
angular.module('myapp',['ui.router'])
.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/index');
$stateProvider.state('fruit',{
url:'/fruit',
templateUrl:'fruit.html'
})
.state('vegetable',{
url:'/vegetable',
templateUrl:'vegetable.html'
})
.state('index',{
url:'/index',
template:'<h2>这是首页</h2>'
});
});
因为在这里我们将index.html和fruit.html以及vegetable.html放置在
了同一个目录下，template下的路径建议使用绝对路径的形式。
效果如下，当初始默认界面为：
点击水果，切换到水果页面：
点击蔬菜，切换到蔬菜页面：
这里介绍了ui-route页面的基础用法，这个用法与ng-route实现的功能大体上是一致的，下面我们来看各个配置属性的基本含义：
I）template/templateUrl
template：字符串方式的模板内容，或者是一个返回html的函数
templateUrl：模板路径或者是返回模板路径的函数
templateProvider：返回HTML内容的函数
例如：在我们的例子中所写的
.state('vegetable',{
url:'/vegetable',
templateUrl:'vegetable.html'
})
.state('index',{
url:'/index',
template:'<h2>这是首页</h2>'
});
II）.controller
控制器，返回对应url模板的控制器名称，或者是对应url模板的控制器函数。如果没有对应的模板定义，控制器对象就不会被创建
III）.resolve
使用resolve功能，我们可以准备一组用来注入到控制器的依赖对象。在ngRoute中，resolve可以在实际渲染之前解决掉promise，resolve选项提供一个对象，对象中的key就是准备注入到controller中的依赖名称，值则是这个创建对象的工厂。
3.通过ui-route实现深层次的路由嵌套
我们在水果页面加上了新的html：
<ul>
<li><a ui-sref="fruit.orange">橘子</a></li>
<li><a ui-sref="fruit.apple">苹果</a></li>
<li><a ui-sref="fruit.banana">香蕉</a></li>
</ul>
<div ui-view></div>
我们发现现在一级导航栏底下，多了一个二级导航栏（多了一个ui-view）
重新配置JS路由，在第一级路由fruit的基础上进一步进行嵌套，JS代码
如下：
$stateProvider.state('fruit',{
url:'/fruit',
templateUrl:'fruit.html'
})
.state('vegetable',{
url:'/vegetable',
templateUrl:'vegetable.html'
})
.state('index',{
url:'/index',
template:'<h2>这是首页</h2>'
})
.state('fruit.orange',{
url:'/orange',
templateUrl:'orange.html',
})
.state('fruit.apple',{
url:'/apple',
templateUrl:'apple.html'
})
.state('fruit.banana',{
url:'/banana',
templateUrl:'banana.html'
});
最后我们来看效果：现在点击水果一级切换页面之后显示为：
在点击橘子，苹果或者香蕉进行选择，其效果为，即二级切换页面的效果为：
4.此外ui-route还可以实现多视图路由，这个功能同一个state下，全页面分为几个细小的页面分别显示不同的值。
希望本文所述对大家AngularJS程序设计有所帮助。