angular路由功能uiRouter

前面我刚写了一篇文章，解释了angular的路由ngRoute模块，为什么还有uiRouter这个插件呢？

1、UI-Router支持嵌套视图，ngRoute不支持

2、UI-Router支持多视图，ngRoute不支持

ngRoute  和  ui-route 相比:

$route       —>   $state

$routeParams      —>  $stateParams

$routeProvider      —>  $stateProvider

<div ng-view></div>      —>  <div ui-view></div>

所以，我们需要uiRouter。

首先，我们还是需要用ui-view标签划定区域

<div ui-view></div>

在主页面将文件引入，在模块内嵌入模块。

var app = angular.module("mymodule", ["ui.router"]);

然后开始写路由，

app.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise("/index");//未定义的页面显示还是需要ngRoute的otherwise成员方法定义
    $stateProvider.state('index', {//index为请求的地址
            url: '/index',// 这里的/index为设置在浏览器#后面显示的地址
            views: {
                '': {//空为主ui-view模块
                    templateUrl: 'tpls/home.html'//模板地址
                },
                'main@index': {//这个是设置嵌套在index里面名为main的ui-view
                    templateUrl: 'tpls/loginForm.html'//模板地址
                }
            }
        }).state("index.page",{//对应的路由为/index/page
          url:"/page",
          views:{
            
          }
        })
  });