路由允许我们通过不同的 URL 访问不同的内容。
说明：在angular项目中，目前比较常用的路由分别是ng-router和ui-router。不管是ng-router还是ui-router均需要在引入angular之后按需引入相应的js模块文件。接下来分别讲解一下这两种路由。
1.ng-router
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script>
<style type="text/css" >
body, html, ul, p, h2 {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
background: #F2F2F2;
font-size: 12px;
}
ul {
list-style: none;
}
.router-list {
line-height: 35px;
text-indent: 15px;
border-bottom: 1px solid #FFF;
}
.router-list a {
margin-right: 20px;
}
</style>
</head>
<body ng-app="myApp">
<div class="router-list"><a href="#/page1">page1</a><a href="#/page2" >page2</a></div>
<div ng-view></div>
<script type="text/javascript" >
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/page1", {
template: `
<div >page1</div>
`
}).when("/page2", {
template: `
<div >page2</div>
`
}).when("/404", {
template: `
<div >404了</div>
`
}).otherwise({
redirectTo: '/404'
});
});
</script>
</body>
</html>
ui-router
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.22/angular-ui-router.js"></script>
<style type="text/css" >
body, html, ul, p, h2 {
margin: 0;
}
body, html {
width: 100%;
height: 100%;
background: #F2F2F2;
font-size: 12px;
}
ul {
list-style: none;
}
.router-list {
line-height: 35px;
text-indent: 15px;
border-bottom: 1px solid #FFF;
}
.router-list a {
margin-right: 20px;
}
</style>
</head>
<body ng-app="myApp">
<div class="router-list"><a href="#/page1">page1</a><a href="#/page2" >page2</a></div>
<ui-view></ui-view>
<script type="text/javascript" >
var app = angular.module("myApp", ["ui.router"]);
app.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise("404");
$stateProvider.state("page1", {
url: '/page1',
template: `
<div >page1</div>
`
}).state("page2", {
url: '/page2',
template: `
<div >page2</div>
`
}).state("404", {
url: "/404",
template: `
<div >404了</div>
`
});
});
</script>
</body>
</html>
module抽离与ui-router配合
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.22/angular-ui-router.js"></script>
<style type="text/css" >
body, html, ul, p, h2 {
margin: 0;
}
body, html {
width: 100%;
height: 100%;
background: #F2F2F2;
font-size: 12px;
}
ul {
list-style: none;
}
.router-list {
line-height: 35px;
text-indent: 15px;
border-bottom: 1px solid #FFF;
}
.router-list a {
margin-right: 20px;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="routerListController as ctrl" class="router-list">
<a ng-href="{{item.href}}" ng-repeat="item in routerList">{{item.text}}</a>
</div>
<ui-view></ui-view>
<script type="text/javascript" >
var module2 = angular.module("myApp.module2", []);
module2.config(function($stateProvider) {
$stateProvider.state("module2/page1", {
url: '/module2/page1',
template: `
<div >I am module2's page1</div>
`
}).state("module2/page2", {
url: '/module2/page2',
template: `
<div >I am module2's page2</div>
`
});
});
var app = angular.module("myApp", ["ui.router", "myApp.module2"]);
app.controller("routerListController", function($scope) {
$scope.routerList = [
{
text: "page1",
href: "#/page1"
}, {
text: "page2",
href: "#page2"
}, {
text: "module2/page1",
href: "#/module2/page1"
}, {
text: "module2/page2",
href: "#/module2/page2"
}, {
text: "测试404",
href: "#/xxx"
}
];
});
app.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise("404");
$stateProvider.state("page1", {
url: '/page1',
template: `
<div >page1</div>
`
}).state("page2", {
url: '/page2',
template: `
<div >page2</div>
`
}).state("404", {
url: "/404",
template: `
<div >404了</div>
`
});
});
</script>
</body>
</html>
