1.介绍 ui-router
ui-router被认为是AngularUI为开发者提供的最实用的一个模块,它是一个让开发者能够根据URL状态或者说是’机器状态’来组织和控制界面UI的渲染,而不是仅仅只改变路由(传统AngularJS应用实用的方式)。该模块为开发者提供了很多最视图(view)额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用,UI-Router也可以极佳地驾驭。
2. 做个简单的路由跳转:
引入js文件
1. 我们需要引入AngularJS框架
2. 我们需要引入ui-router框架.
1.新建三个页面
- Page1.html
<div>
<div>
<h1>Page 1 content goes here...</h1>
</div>
</div>
- Page2.html
<div>
<div>
<h1>Page 2 content goes here...</h1>
</div>
</div>
- Page3.html
<div>
<div>
<h1>Page 3 content goes here...</h1>
</div>
</div>
4.Home页面引用上面页面
<div ng-app='app'>
<div class="col-md-3" ng-controller="myCtrl">
<h2>angular路由应用</h2>
<div>
<span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
<span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
<span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
<span style="width:100px" ui-sref=".About"><a href="">About.cshtml3</a></span>
</div>
<div>
<div ui-view="" />
</div>
</div>
</div>
实现效果如下:
以上是页面,下面是angular部分
1. 声明模块,并且注入ui.router服务
var arM = angular.module('app', ['ui.router']);
2.在config中配置路由,注入stateProvider和urlRouterProvider服务
arM.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('', '/Page3.html'); //$urlRouterProvider初始化跳转的状态,首先想展示哪一个页面
$stateProvider
.state("Page1", {
url: "/Page1",
templateUrl: "/Page1.html",
})
.state("Page2", {
url: "/Page2",
templateUrl: "/Page2.html"
})
.state("Page3", {
url: "/Page3",
templateUrl: "/Page3.html"
}).state("About", {
url: "/aaaa/Page4111",
templateUrl: "/Home/Contact"
})
});
单独把路由的部分拉出来解释,解释如下,1.2.3
- state后面紧跟着的Page1 是对应上面html中ui-sref中名称
- url中的字符串是显示在浏览器中的路由名称
- templateUrl是访问的具体路径(文件放在那里的事实路径)
是专门用来存放跳转的页面,里面的嵌套会变成 ng-scope
<div ui-view="" />
参考文档:https://www.oschina.net/translate/angularjs-ui-router-nested-routes?print