angularJs ui-route

Posted 2020-09-26 秋水涴晴汐

我们首先要新建几个文件      pageTab.html、tab1.html、tab2.html、tab3.html

实例与讲解

1、首先写一个页面包括如下内容，主要是js部分

<script src="angular.min.js"></script>
<script src="angular-ui-route.js"></script>
<script>
var app=angular.module("app",[‘ui.router‘]);//声明AngularJS模块, 并把ui-router传入AngularJS主模块，所有的结合起来我们就得到了Angular模块。

//这一行声明了把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入，这样我们就可以为这个应用程序配置路由了.
　　app.config(function($stateProvider,$urlRouterProvider){

//这一行做什么的呢，如果没有路由引擎能匹配当前的导航状态，那它就会默认将路径路由至 PageTab.html, 这个页面就是状态名称被声明的地方. 只要理解了这个，那它就像switch case语句中的default选项.
　　$urlRouterProvider.when(‘‘,‘pageTab‘);

//这一行定义了会在pagetab.html页面第一个显示出来的状态，作为页面被加载好以后第一个被使用的路由.
　　　　$stateProvider.state(‘pageTab‘,{
　　　　　　url:‘/pageTab‘,
　　　　　　templateUrl:‘pageTab.html‘

// 现在，就由这一行来定义页面, 但是等一等，这里有点不同，我们之前为上面的状态名称加上了前缀，并且使用点“.“号进行了分隔. 这里很关键，它会告诉路由引擎我们在这里定义的是子页面/嵌入页面/嵌入(sub page / nested page / nested)状态的page/route.
　　　　}).state(‘pageTab.tab1‘,{
　　　　　　url:‘/tab1‘,
　　　　　　templateUrl:‘tab1.html‘
　　　　}).state(‘pageTab.tab2‘,{
　　　　　　url:‘/tab2‘,
　　　　　　templateUrl:‘tab2.html‘
　　　　}).state(‘pageTab.tab3‘,{
　　　　　　url:‘/tab3‘,
　　　　　　templateUrl:‘tab3.html‘
　　　　})
　　})
</script>
<div ui-view></div>

2、这是主页面，第一次使用路由就是显示pageTab.html，点击tab1或tab2或tab3然后跳转到相应的页面

<div>
<a href="javascript:;" ui-sref=‘.tab1‘>tab1</a>
<a href="javascript:;" ui-sref=‘.tab2‘>tab2</a>
<a href="javascript:;" ui-sref=‘.tab3‘>tab3</a>
<div ui-view></div>
</div>