首页 > 代码库 > angularJs ui-route

angularJs ui-route

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

实例与讲解

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

<script src="http://www.mamicode.com/angular.min.js"></script>
<script src="http://www.mamicode.com/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>

 

angularJs ui-route