4-1 angular路由
- AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
- 通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
- 通常我们的URL形式为
http://www.520it.com/first/page， 但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：
http://www.520it.com/#/first
http://www.520it.com/#/second
http://www.520it.com/#/third
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://www.520it.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。
AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
[图片上传失败...(image-a508a1-1535601924746)]
在以上图形中，我们可以看到创建了两个 URL： /ShowOrders 和 /AddNewOrder。每个 URL 都有对应的视图和控制器
在后端开发中通过URL地址可以实现页面（视图）的切换
但是AngularJS是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成
所以无需切换URL地址（即不允许产生跳转）
但Web应用中又经常通过链接（a标签）来更新页面（视图）
当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。AngularJS对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。
在angular当中路由就是锚点
用来做单页面应用程序的切换。
锚点的变化，我们又称为路由的变化。
路由在angular当中属于单独的一个模块。
帮你监听锚点的跳转，它就是路由。
使用路由分为四步:
- 1.引入angular-route.js
- 2.实例化模块时,注入ngRoute模块,包含了ngRoute 模块作为主应用模块的依赖模块
- 3.配置路由模块
- 4.布局模板
<script src="angular.js"></script>
<!--
一.引入angular-route.js
注意:必须要在引入angular.js 之后,引入路由
-->
<script src="angular-route.js"></script>
<script>
//二.实例化模块时, 注入ngRoute模块
var app = angular.module('app', ['ngRoute']);
//
app.controller('skController', ['$scope', '$http',function ($scope, $http) {
}]);
//路由,监听锚点变化
//三.配置路由 ->让路由帮你监听哪些锚点发生了变化
app.config(['$routeProvider', function ($routeProvider) {
//when() 当锚点为指定值时,帮你处理相应的逻辑
//路由规定, 在锚点之前,加上一个 '/'
$routeProvider.when('/home',{
template:'<h1>首页内容<h1>'
}).when('/my',{
template:'<h1>关于我们内容<h1>'
}).when('/contact',{
template:'<h1>联系我们内容<h1>'
})otherwise({
//都不是设置默认值
redirectTo:'/home'
});
}]);
</script>
<body ng-app="app" ng-controller="skController">
<div class="header">
<ul>
<!--注意:锚点后也要加 /-->
<li><a href="#/home">首页</a></li>
<li><a href="#/my">关于我们</a></li>
<li><a href="#/contact">联系我盟</a></li>
</ul>
<!-- 四.布局模版 -->
<div class="content">
<div ng-view></div>
</div>
</div>
</body>
