Angular 浅谈路由

来源：互联网发布：山东塑胶跑道标准数据编辑：程序博客网时间：2024/06/14 04:17

Almost all non-trivial, non-demo Single Page App (SPA) require multiple pages. A settings page is different from a dashboard view. The login page is different from an accounts page

设置页面不同于控制页面，登录页面不同于账号信息页面。就是说一个应用很多功能不同的页面

在开讲之前，首先谈谈APP应用。平时我们用的app总是多页面，如果用原生安卓或者苹果，那当然很流畅啦。但是当

我们用一般的html页面做移动端，简单时候我们可以用<a href=""></a>这样的标签去链接页面时，速度还是可以的。

　　但是当我们的应用越来越多时，切换起来没那么流畅。又是碍于网速，页面加载进来有点慢。但是在angular里面

，我们可以用路由进行切换。因为在angular里面，我们用户一般在加载这样的应用时，会整个的缓存在手机上。我们用

路由进行切换时，不用再发起HTTP请求了。体验比原来好。

生活中，有路由器的概念

>路由器会给局域网中的电脑自动分配IP地址

>我们就可以通过IP地址来查询具体的电脑

Angular中，有一个路由模块

>路由将超链接和对应的HTML模块绑定

>通过HTML超链接来查询到具体的HTML模板

而路由的作用就是请求分发然后资源查找，根据用户不同的链接来确定用户要访问的是哪个模板，然后找到对应的模板，返回给用户进行展示。为了便于理解，在此我们画张图。

在做项目时，不仅要引入Angualr核心框架文件，还要引入Angular路由模块文件。

一般路由结构如下：

<script>    var app = angular.module("myApp",["ngRoute"]);    app.config(["$routeProvider",function ($routeProvider) {        $routeProvider            .when("/",{                templateUrl:"template/main.html"            }).when("/login",{                templateUrl:"template/login.html"            }).when("/regist",{                templateUrl:"template/regist.html"            }).when("/shopcart",{                templateUrl:"template/shopcart.html"            }).otherwise("/");    }]);</script>

路由模块和Angular组件化类似，我们把所需的路由模块建于template文件，通过templateUrl链接

$routeProvider:AngularJS提供的用于进行路由配置的内置服务；app.config()函数主要用于进行《配置信息》的添加

HTML页面如下所示：

<body>     <ul>         <li><a href="#!/">首页</a></li>         <li><a href="#!/login">登录</a></li>         <li><a href="#!/regist">注册</a></li>         <li><a href="#!/shopcart">购物车</a></li>    </ul>    <div ng-view></div></body>

通过锚链接的方式来实现单页面应用，在次要说明一下：在angular1.5之前，锚链接跳转，使用#/开头即可；但从1.5开始，锚链接跳转，使用#！/开头

ng-view 指令为锚链接显示所在位置。

路由的用法我们就介绍到这里，上边也是我通过路由来写的一个单页面应用。可以借鉴便于更好的理解路由。

1 0