AngularJs路由

一个应用是由若个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图，路由则是实现这一功能的关键。

• 路由

在后端开发中通过URL地址可以实现页面（视图）的切换，但是AngularJS是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成，所以无需切换URL地址（即不允许产生跳转），但Web应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。
实现单页面应用需要具备：
a、只有一页面
b、链接使用锚点
在单一页面中可以能过hashchange事件监听到锚点的变化，进而可以实现为不同的锚点准不同的视图，单页面应用就是基于这一原理实现的。而在AngularJS中对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。

• 使用

1、引入angular-route.js

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

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

3、配置路由模块

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

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

    
index
    
book
    
collect
    
home


    
    

Paste_Image.png

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

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

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

abc.html中代码：

{{content}}

Paste_Image.png

• 路由参数

1、提供两个方法匹配路由，分别是when和otherwise，when方法需要两个参数，otherwise方法做为when方法的补充只需要一个参数，其中when方法可以被多次调用。
2、第1个参数是一个字符串，代表当前URL中的hash值。
3、第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。
a)、template 字符串形式的视图模板
b)、templateUrl 引入外部视图模板
c)、controller 视图模板所属的控制器
d)、redirectTo跳转到其它路由，只能在otherwise方法中使用
4、获取参数，在控制中注入$routeParams可以获取传递的参数

Paste_Image.png