AngularJS路由是什么？

路由是AngularJS构建单页面应用的基础，它是一个用于请求URL分发和跳转的一个应用组件，Angular中通过$routeProvider路由服务提供者进行核心的配置处理。

AngularJS的路由实际上是一种纯前端的解决方案，它的本质是：当请求一个url时，根据路由配置这个url，然后再请求模板片段，并插入到ng-view中。AngularJS的路由更倾向于通过改变url进行页面的局部刷新。

路由

在后端开发中通过URL地址可以实现页面（视图）的切换，但是AngularJS是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成，所以无需切换URL地址（即不允许产生跳转），但Web应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。

实现单页面应用需要具备：

a、只有一页面

b、链接使用锚点

在单一页面中可以能过hashchange事件监听到锚点的变化，进而可以实现为不同的锚点准不同的视图，单页面应用就是基于这一原理实现的。而在AngularJS中对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。

使用

1、引入angular-route.js

<!--引入angularjs核心库-->
<script src="js/angular.min.js"></script>
<!--引入angularjs路由模块-->
<script src="js/angular-route.js"></script>

2、实例化模块（App）时，当成依赖传进去（模块名称叫ngRoute）。

//作为依赖传入
 var App = angular.module('App',['ngRoute']);

3、配置路由模块

 App.config(['$routeProvider',function ($routeProvider) {
            $routeProvider.when('/index',{
                template:'<h1>这是index页面！！！！！</h1>'
//                templateUrl:'index.html'
            })
            .when('/book',{
                template:'<h1>这是book页面！！！！！</h1>'
            })
            .when('/collect',{
                template:'<h1>这是collect页面！！！！！</h1>'
            })
            .when('/home',{
                template:'<h1>这是home页面！！！！！</h1>'
            })
            .otherwise({
                redirectTo:'/index'
        })
    }])

在这里通过调用config方法配置路由，里面有两个参数，第一个参数为所要配置的服务，第二个参数为一个对象，配置当前路由的参数，如视图、控制器等，其中template就是字符串形式的视图模板，打印出一些内容，这个参数还可以是templateUrl,这样就会定位到外部文件。如果这个参数为 controller,就要结合控制器来使用，这里的$routeProvider.when就相当于switch... case...语句，就是当锚点后面的值满足什么时会在当前显示什么内容,otherwise方法就是在不做任何点击操作时，所显示的内容。

4、布局模板

通过ng-view指令布局模板，路由匹配的视图会被加载渲染到些区域。

<ul class="list">
    <li><a href="#/index">index</a></li>
    <li><a href="#/book">book</a></li>
    <li><a href="#/collect">collect</a></li>
    <li><a href="#/home">home</a></li>
</ul>
<div class="content">
    <!--视图会被加载并渲染到此处-->
    <div ng-view=""></div>
</div>

1.jpg-600

当配置路由其中有个参数是controller的时候,要依赖控制器，代码如下：

 App.config(['$routeProvider',function ($routeProvider) {
            $routeProvider.when('/index',{
              //定位到abc.html,使用控制器
                templateUrl:'abc.html',
                controller:'demoController'
            })
            .when('/book',{
                template:'<h1>这是book页面！！！！！</h1>'
            })
            .when('/collect',{
                template:'<h1>这是collect页面！！！！！</h1>'
            })
            .when('/home',{
                template:'<h1>这是home页面！！！！！</h1>'
            })
            .otherwise({
                redirectTo:'/index'
        })
    }])

   App.controller('demoController',['$scope','$http','$routeParams', 
   function ($scope,$http,$routeParams) {
        $scope.content = "正在学习AngularJs路由；"
    }])

abc.html中代码：