序
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>
