Angular中的路由问题~

来源：互联网发布：网络招聘编辑：程序博客网时间：2024/05/17 21:51

Angular中的路由问题

大家好，今天我们小谈一下Angular中的路由（route）这个问题吧~

首先，我们做项目时，头部和页脚部分是每个页面必不可少的内容，中间的部分千变万化，那么我们可以写一个固定的index.html，头部和页脚部分写好，中间变化的部分我们写成不同的模板，需要哪种，就把这个模板调用过来放在index页面中间。这样既可以少写很多代码，也同时锻炼我们思维能力。

以上所说的就是单页面，也称为SPA，是singleton page application的缩写。

单页面应用：程序在执行的过程中，我们不论访问任何链接，都会在同一个页面中展示数据。在整个项目执行过程中，客户看到的都是唯一的一个页面，不同的是~在整个页面中，会根据用户请求的内容的不同，动态的更新页面中的某一个部分的数据，在这样的模式下，项目运行只需要一个基础的页面即可，其他的都是模板。模板就是用于在这个基础页面中更新的数据。

SPA应用中，单页面中就会出现多个独立的控制器
* * 多个独立控制器之间的数据共享，方式一：使用$rootScope来进行数据共享
* * 多个独立控制器之间的数据共享，方式二：使用自定义服务进行数据的传递
* * 自定义服务主要的使用场景：用来进行不同控制器之间的数据共享和传递

SPA通过路由功能，让我们的WEB应用，在运行过程中，依托于某一个页面模板进行业务处理，在SPA应用中，我们可以通过一个模板页面和其他的业务页面进行不同的路由组合来完成复杂和庞大的页面逻辑和业务的处理！

那么问题来了，什么是路由呢？？？？？？？？？？？？

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

路由主要分为ng路由和ui路由

接下来我们说一说ng路由

ng路由主要分为三个组成部分：路由指令、路由服务、路由服务提供者。

1、路由指令：ng-view

描述：
ng-view指令主要用于将路由指向的页面渲染到当前页面的布局中。
指令概述：
指令会创建自己独立的作用域
语法：
<ng-view [onload=”string”] [autoscroll]=”string”></ng-view>
onload:当视图发生改变时执行属性值中的表达式
autoscroll:当视图发生改变时自动触发$anchorScroll事件
事件：
路由视图一旦加载时，就会自动触发$viewContentLoaded事件

2、路由提供者：routeProvider

描述：
内置服务对象$routeProvider主要用于进行路由配置
该服务的使用必须依赖ngRoute模块，也就是项目中必须添加animate-route.js
主要方法：
when(path, route);用于在访问path路径时，跳转到route指定的视图
|-- path：路由跳转的路径
|-- route：路由对象<组件对象>，一个JSON对象
otherwise(params);用于在访问不存在的路径时，跳转的默认路径或者视图
|-- params：指定路径或者路由对象

3、内置服务（路由服务）：$route & $routeParams

$route服务被用于进行深层超链接信息的描述，它会监听$location.url()地址并进行url地址和指定的路由视图之间的映射关系。
$routeParams服务允许开发人员可以进行路由中参数的处理。

说了这么多也不是一个案例来的痛快！下面是我写的一个路由小案例：

这是一个单页面为index.html，其他模板分别为main.index（系统主页）、login.html（登录模板页面）、regist.html（注册模板页面）。

其案例文件目录如下：

其单页面index.html代码如下:

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title>系统单页面</title>    <script src="../lib/AngularJS/angular.min.js"></script>    <script src="../lib/AngularJS/angular-route.js"></script>    <style>        *{            margin: 0;            padding: 0;        }        ul{            width: 600px;height: 80px;            background-color: #cccccc;            margin: 0 auto;            list-style: none;        }        li{            width: 200px;height: 80px;            float: left;        }        a{            display: block;            width: 200px;height: 80px;            text-decoration: none;            text-align: center;            line-height: 80px;            font-size: 22px;        }        a:hover{            background-color: #2aabd2;            color: gold;        }        .total{            width: 700px;height: 500px;            border: 1px solid #cccccc;            border-radius: 5px;            margin: 10px auto 0;        }    </style></head><body><ul>    <li><a href="#!/">首页</a></li>    <li><a href="#!/login">欢迎登录</a></li>    <li><a href="#!/regist">欢迎注册</a></li></ul><div ng-view class="total"></div><script>    var app=angular.module("myApp",["ngRoute"]);    app.config(["$routeProvider",function ($routeProvider) {        $routeProvider                .when("/",{                    templateUrl:"template/main.html",                    controller:function ($rootScope,$scope) {                        $scope.user=$rootScope.user;                    }                }).when("/login",{                  templateUrl:"template/login.html",                   controller:function ($scope,$http,$location,$rootScope) {                       $scope.loginFn=function () {                           $http({                               method:"GET",                               url:"http://datainfo.duapp.com/shopdata/userinfo.php",                               params:{                                   status:"login",                                   userID:$scope.username,                                   password:$scope.password                               }                           }).then(                                   function success(resp) {                                       console.log("请求成功");                                       if (resp.data instanceof Object){                                           console.log("登录成功，跳转首页");                                           $rootScope.user=resp.data;                                           $location.path("/");                                       }else {                                           console.log("账号或密码有误");                                       }                                   },                                   function (resp) {                                       console.log("请求失败[系统繁忙，请稍后再试]");                                   }                           );                       }                   }        }).when("/regist",{            templateUrl:"template/regist.html",           controller:function ($scope,$http,$location,$rootScope) {               $scope.registFn=function () {                   $http({                       method:"GET",                       url:" http://datainfo.duapp.com/shopdata/userinfo.php",                       params:{                           status:"register",                           userID:$scope.username,                           password:$scope.password                       }                   }).then(                           function success(resp) {                               console.log("请求成功",resp.data);                                if (resp.data==1){                                    console.log("注册成功，跳转登录页面");                                    $rootScope.user=resp.data;                                    $location.path("/login");                                }else {                                    console.log("用户重名或数据库报错");                                }                           },                           function error(resp) {                                console.log("请求失败[系统繁忙，稍后再试]");                           }                   );               }           }        }).otherwise("/");    }]);    app.run(["$rootScope",function ($rootScope) {        $rootScope.user={userID:"游客"}    }]);</script></body></html>

其几个模板页面代码分别如下：

系统首页：

<style>    h2{        margin: 50px auto 0;        text-align: center;    }    h3{        margin: 10px auto 0;        text-align: center;    }</style><h2>系统首页</h2><h3>尊敬的{{user.userID}},用户欢迎访问本系统</h3>

登录模板：

<style>    div{        text-align: center;        width: 500px;        height: 70px;        margin: 50px auto 0;        font-size: 20px;    }    input{        width: 180px;height: 25px;    }    button{        width: 80px;height: 30px;    }</style><div>    <h2>登录界面</h2>    账号：<input type="text" ng-model="username"><br>    密码：<input type="text" ng-model="password"><br>    <button ng-click="loginFn()">登录</button></div>

注册模板为：

<style>    div{        text-align: center;        width: 500px;        height: 70px;        margin: 50px auto 0;        font-size: 20px;    }    input{        width: 180px;height: 25px;    }    button{        width: 80px;height: 30px;    }</style><div>    <h2>注册界面</h2>    账号：<input type="text" ng-model="username"><br>    密码：<input type="text" ng-model="password"><br>    <button ng-click="registFn()">注册</button></div>

其运行界面如下，点击首页、登录、注册分别调用自己的模板

当注册其失败时（也就是说返回值为0或2时）会在控制台显示

当注册成功时返回值为1，且自动跳转到登录模板

同理当登录失败时返回值0或2（用户不存在或用户密码不符）

当登录成功时会自动跳转到系统首页

1 0