<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../7-BoothStrap/CSS/bootstrap.css" />
</head>
<body ng-app="app" ng-controller="control">
<nav class="navbar navbar-default">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li class="active"><a href="#/">首页</a></li>
<li><a href="#/page1">01 指令与表达式.html</a></li>
<li><a href="#/page2">0501-factory.html</a></li>
<li><a href="#/page3">04-service.html</a></li>
</ul>
<!-- /.container-fluid -->
</nav>
<div ng-view></div>
</body>
<script src="libs/angular.js"></script>
<script src="libs/angular-route.js"></script>
<script type="text/javascript">
/*angularJS中使用路由
* 1、导入angular-route.js
* 2、给模块注入“ngRoute” ,eg:angular.module("app",["ngRoute"])
* 3、将超链接地址改为路由格式 eg:<a href="#/">首页</a>
* 4、在config中，注入$routeProvider,进行路由配置
* eg: $routeProvider
.when('/',{template:'这是首页页面'})
.when('/page1',{template:'这是page1页面'})
.when('/page2',{template:'这是page2页面'})
.when('/page3',{template:'这是page3页面'})
.otherwise({redirectTo:'/'});
5、在页面合适的位置，添加ng-view,用于承载打开的页面：
<div ng-view></div>或<ng-view></ng-view>
[路由参数对象中可选属性]
①template:自定的html模板，
②templateUrl:导入外部的html模板。为了避免冲突，外部的html模板，保留body以内的
部分即可。
③redirectTo:重定向，一般用于.otherwise()中。重定向到某个路由页面
④controller:在当前模板上执行的controller函数，生成新的scope。
*/
angular.module("app",["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/page1',{template:'这是page1页面'})
.when('/page2',{templateUrl:'page2.html'})
.when('/page3',{template:'这是page3页面'})
.otherwise({redirectTo:'/'});
})
.controller("control",function($scope){//给函数注入系统服务
})
</script>
</html>