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

最新推荐文章于 2024-05-08 09:50:52 发布

暖夏随园

最新推荐文章于 2024-05-08 09:50:52 发布

阅读量480

点赞数

分类专栏： angular 文章标签： angular 应用手机路由

本文链接：https://blog.youkuaiyun.com/nuanxiasuiyuan/article/details/71104297

版权

angular 专栏收录该内容

13 篇文章

订阅专栏

在开讲之前，首先谈谈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>  //我们注入的某个模板