#angular中的路由

来源：互联网发布：榕基软件股票行情编辑：程序博客网时间：2024/06/07 13:53

一个应用是由若个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图，路由则是实现这一功能的关键。在了解之前我们首先要知道一个概念，就是什么是单页面应用？

单页面应用SPA

SPA（Single Page Application）指的是通单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合CSS3动画模仿原生App交互，然后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。
在PC端也有很多的应用，通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，局部刷新的本质是动态生成DOM，新生成的DOM元素并没有真实存在于文档中，所以当再次刷新页面时新添加的DOM元素会“丢失”，通过单页面应可以很好的解决这个问题。

路由

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

//单页面锚点应用的原理<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <!--            1:之前使用锚点，只是让锚点调到页面上面对应的某个位置.            //我们有一个事件，监听锚点的改变            //锚点的事件发生了改变就会触发这个事件。            //这个事件叫做 onhashchange hash 值发生改变的时候触发.    -->    <nav>        <li><a href="#/login">登录</a></li>        <li><a href="#/register">注册</a></li>        <li><a href="#/home">首页</a></li>    </nav>    <div class="message">    </div>    <script>                window.onhashchange=function(){                       //console.log("锚点发生改变了。");                      //锚点的值发生了改变之后，我可以获取到锚点的值                      //console.log(window.location.hash);                        //hash 就是锚点的值，我们要根据这个值去获取对应的数据.                        var hash=window.location.hash;                       //截取#                        hash=hash.substring(1,hash.length);                        //我需要根据这个hash 值去请求对应的页面.                        console.log(hash);                        var url="";                        if(hash=="/login"){                            url="login.html";                        }else if(hash=="/register"){                            url="register.html";                        }else if(hash=="/home"){                            url="home.html";                        }                        var xhr=new XMLHttpRequest();                        xhr.open("get",url);                        xhr.send(null);                        xhr.onreadystatechange=function(){                                if(xhr.readyState==4 && xhr.status==200){                                        var data=xhr.responseText;                                        document.querySelector(".message").innerHTML=data;                                }                        }                }    </script></body></html>

通过上面的例子发现在单一页面中可以能过hashchange事件监听到锚点的变化，进而可以实现为不同的锚点准不同的视图，单页面应用就是基于这一原理实现的。
AngularJS对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。
在1.2版前路由功能是包含在AngularJS核心代码当中，之后的版本将路由功能独立成一个模块，下载angular-route.js

使用

1、引入angular-route.js

    //AngularJs的核心框架    <script src="angular.min.js"></script>    //AngularJs的路由模块    <script src="angular-route.js"></script>

2、实例化模块时，当成依赖传进去，依赖模块叫ngRoute

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

3、配置路由模块

    //通过routeProvider    App.config(["$routeProvider",function($routeProvider){        //路由配置        $routeProvider.when("/index",{            //templateUrl:'index.html'也可以是路径            template:'首页',            //如果需要js控制,可以绑定到控制器            controller:'indexController'        })    }])

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

    //视图会被加载渲染到此处    <div ng-view></div>

路由参数

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="libs/angular.min.js"></script>    <!--我还需要引入路由模块-->    <script src="libs/angular-route.js"></script>    <script>            //是否依赖其他的模块 ngRoute 路由模块的名字，固定的            var App=angular.module("app",["ngRoute"]);            //我现在肯定要根据锚点去配置路由. $routeProvider            //config 的方法可以使用实现配置            // $routeProvider 去进行配置.            //$routeProvider 有一些方法可以让我们去进行配置.            //when 当            App.config(["$routeProvider",function($routeProvider){                    $routeProvider.when("/login",{                        //我要出现什么样的视图                        template:"我叫做登录页面"                    }).when("/register",{                        template:"我叫做注册页面"                    }).when("/home",{                        template:"我是首页"                    }).when("/cart",{                        //template:"我是购物车",                        templateUrl:"cart.html"                    });            }]);    </script></head><body ng-app="app">    <nav>        <li><a href="#/login">登录</a></li>        <li><a href="#/register">注册</a></li>        <li><a href="#/home">首页</a></li>        <li><a href="#/cart">购物车</a></li>    </nav>    <!--angular 的指令 ，数据展示到对应的这个位置.-->    <div ng-view>    </div></body></html>

4、获取参数，在控制中注入$routeParams可以获取传递的参数

    //得到的结果为{id : 10}    .when('/index/:id',{//路由规则        template:" Index Page",        controller:"contr"    })

    App.controller("contr",["$routeParams",function($routeParams){        console.log($routeParams);    }])

关于单页面路由的知识我大致总结到这里了，希望对大家有点帮助。

1 0