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:{
        		
        	}
        })
	});




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值