angularJS-----路由的概念及用法

在开讲之前，首先谈谈APP应用。平时我们用的app都是多页面，通过大量的页面之间的跳转，来实现不同的功能的业务处理，切换起来就没那么流畅了。

在angular里面，我们可以用路由进行切换。因为在angular里面，我们用户一般在加载这样的应用时，会整个的缓存在手机上。我们用路由进行切换时，不用再发起HTTP请求了。体验比原来好。

什么是路由？

路由，就是网络数据或者请求进行分发的一个网络组件。

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

路由是AngularJS构建单页面应用的基础。

单页面应用，也称为SPA，是singleton page application的缩写。

SPA是什么？

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

ng路由

ng路由是AngularJS官方提供的一种简单的路由操作。

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

路由指令:ng-view

ngView指令主要用于将路由指向的页面渲染到当前页面的布局中。

路由提供者:$routeProvider

内置服务对象$routeProvider主要用于进行路由配置。

该服务的使用必须依赖ngRoute模块，也就是项目中必须添加animate-route.js。

var app=angular.module("myApp",["ngRoute"]);

内置服务<路由服务>

:$route

&

$routeParams

$route

服务被用于进行深层超链接信息的描述，它会监听

$location.url()

地址并进行url地址和指定的路由视图之间的映射关系。

$routeParams

服务允许开发人员可以进行路由中参数的处理。

一般我们的路由结构是这样的。

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"
}).otherwise("/");
}]);

在上述代码中：

config()函数主要用于进行（配置信息）的添加。

$routeProvider

：angularJS提供用于进行路由配置的内置服务。

when(path, route);用于在访问path路径时，跳转到route指定的视图。

　　path：路由跳转的路径

　　route：路由对象<组件对象>，一个JSON对象

ontherwise 就是当你路径访问错误时，找不到。最后跳到这个默认的 页面。

一般在我们的index.html会有这么的一段代码：

<ul>
<li><a href="#!/">主页面</a></li>
<li><a href="#!/login">登录页</a></li>
<li><a href="#!/regist">注册页</a></li>
</ul>
<div ng-view></div>  //我们注入的某个模板

在AngularJS1.5之前，锚点连接用#/开头，从Angular1.5开始，锚点连接用#！/开始。

$location 服务

AngularJS提供了一个服务用以解析地址栏中的URL，并让你可以访问应用当前路径所对应的路由。它同样提供了修改路径和处理各种形式导航的能力。

　path() 用来获取页面当前的路径：

　　

$location.path()

; // 返回当前路径

　　

　　修改当前路径并跳转到应用中的另一个URL：

　　

$location.path('/')

; // 把路径修改为 ‘/’ 路由