Angular JS中路由-route

最新推荐文章于 2020-12-20 12:02:04 发布

chongxiaocheng

最新推荐文章于 2020-12-20 12:02:04 发布

阅读量536

点赞数

CC 4.0 BY-SA版权

分类专栏：框架文章标签： web前端数据 url

本文链接：https://blog.youkuaiyun.com/chongxiaocheng/article/details/71101793

框架专栏收录该内容

8 篇文章

订阅专栏

本文介绍了AngularJS中的路由概念及其组成部分，包括路由指令、路由服务和路由服务提供者，并通过一个实例展示了如何设置和使用路由来构建单页面应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular JS中路由-route

什么是路由？

路由是根据路由器而来，

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

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

Angular JS中

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

1.路由指令：ng-view

ng-view指令会创建自己独立的作用域，主要用于将路由指向的页面渲染到当前页面的布局中。

2.路由服务：$route & $routeParams（内置服务）

$route服务被用于进行深层超链接信息的描述，它会监听$location.url()地址并进行url地址和指定的路由视图之间的映射关系。

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

3.路由服务提供者：$routeProvider

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

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

主要方法：

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

|-- path：路由跳转的路径

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

otherwise(params);用于在访问不存在的路径时，跳转的默认路径或者视图

|-- params：指定路径或者路由对象

为什么要用路由？

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

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

SPA最大的好处就是，在多个页面跳转公共样式布局不变，只需替换不同的模板来达到页面跳转效果

能够节省空间，减少重复代码的编写，简化工作，提升效率和更易后期维护

实例：

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/angular-1.6.4/angular.min.js"></script>
    <script src="../js/angular-1.6.4/angular-route.js"></script>
</head>
<body>
<ul>
    <li><a href="#!/">首页</a></li>
    <li><a href="#!/regist">注册</a></li>
    <li><a href="#!/login">登录</a></li>
    <li><a href="#!/shopcart">购物车</a></li>
</ul>
<ng-view></ng-view>
</body>
<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>
</html>

主页注意事项：

1.引入路由服务模块

<script src="../js/angular-1.6.4/angular-route.js"></script>

2.通过#！锚点链接到相对于的页面模板

	在Angular1.5之前，锚链接跳转，使用#/开头即可

 	在Angular1.5开始，锚链接跳转，使用#!/开头即可 
<ul>
    <li><a href="#!/">首页</a></li>
    <li><a href="#!/regist">注册</a></li>
    <li><a href="#!/login">登录</a></li>
    <li><a href="#!/shopcart">购物车</a></li>
</ul>

3.ng-view用于放置跳转模板内容

<ng-view></ng-view>

4.内置服务对象$routeProvider主要用于进行路由配置
该服务的使用必须依赖ngRoute模块
$routeParams：Angular中进行路由参数传递时使用的一个内置服务
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("/");
    }])

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