angular $stateProvider 路由

$routerProvide和$stateProvider都可以用来配置路由。

<!–在html中添加<ui-view>作为占位符–>

<div ng-app=”myApp”>
<div ui-view></div>
</div>

//引入angularjs 和 ui-router 库

<script src=”../js/angular.min.js”></script>
<script src=”../js/angular-ui-router.min.js”></script>

//定义模板，并注入ui-router
var app = angular.module(‘myApp’, [‘ui.router’]);

//对服务进行参数初始化，这里配stateProvider服务的视图控制

app.config([“$stateProvider”, function ($stateProvider){

$stateProvider

//导航用的名字
.state(‘page1’,{

//访问路径
url: ‘/page1’,

//访问模板
templateUrl: ‘page1.html’
}).state(‘page2’,{
url: ‘/page2’,
templateUrl: ‘page2.html’
}).state(‘page2.child’,{
url: ‘/page2.child’,
templateUrl: ‘/page2.child.html’
})

$urlRouterProvider.otherwise(‘page1’);

}]);

相对路径方式：
‘page1’将匹配…/index.html#/page1

‘page2.child’将匹配…/index.html#/page2/child。

主页面的html:

<section ng-controller=”route-test-controller”>
<div>
<a ui-sref=”page1″>页面一</a>
<a ui-sref=”page2″>页面二</a>
<a ui-sref=”page3.page4″>页面四</a>
</div>
<div ui-view>

</div>
</section>

page1的html:

<div>
页面一
</div>

page2的html:

<div>
页面二

<div ui-view><div>
</div>

page2子路由的html:

<div>

子路由

<button ng-click=”goBack()”>返回</button>
</div>