序
angularjs 1.x 路由配製配製有2中方案（angular-route，angular-ui-router），本文講述的是第一種方案，另外需要注意的是angular-route的版本號，不同版本之間有差異，這裏一v1.6.9爲例。
目錄
文檔內容
入口app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular-router路由配製</title>
</head>
<body ng-app="app">
<div class="nav">
<!--a連接需要改成“#!/”注意angular-route的版本的如果是1.3.x的話，用“#/”-->
<a href="#!/index">首頁</a>
<a href="#!/about">關於我們</a>
<a href="#!/news">新聞中心</a>
<a href="#!/product">產品中心</a>
<a href="#!/contact">聯繫我們</a>
</div>
<!--ng-view路由的接收節點，相當於窗口-->
<div ng-view></div>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular-route.js"></script>
<script>
angular.module('app', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: './views/index.html'})
.when('/index', {templateUrl: './views/index.html'})
.when('/about', {templateUrl: './views/about.html'})
.when('/news', {templateUrl: './views/news.html'})
.when('/product', {templateUrl: './views/product.html'})
.when('/contact', {templateUrl: './views/contact.html'})
.otherwise({redirectTo: '/'}); //表示沒有匹配到正確路由時跳轉到這裏
}])
</script>
</body>
</html>下面是views模板頁，根節點最好只有一個div，養成這個習慣比較重要。
index.html
<div>
<h2>首頁頁面</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>about.html
<div>
<h2>關於我們頁面</h2>
</div>news.html
<div>
<h2>新聞中心頁面</h2>
</div>
product.html
<div>
<h2>產品中心頁面</h2>
</div>contact.html
<div>
<h2>聯繫我們頁面</h2>
</div>
