angular路由功能uiRouter

最新推荐文章于 2024-04-26 21:10:08 发布

暮志未晚NAN

最新推荐文章于 2024-04-26 21:10:08 发布

阅读量4.8k

点赞数 1

分类专栏： angular 文章标签： uiRouter angular 路由

本文链接：https://blog.csdn.net/qq_30100043/article/details/53165193

版权

angular 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

前面我刚写了一篇文章，解释了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:{
        		
        	}
        })
	});