Angularjs 路由操作

最新推荐文章于 2021-12-29 08:47:28 发布

chun_前端

最新推荐文章于 2021-12-29 08:47:28 发布

阅读量371

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/chun312193/article/details/71103652

本文深入讲解了AngularJS中的路由概念及其实现方式，包括ng-router和ui-router的区别、路由指令ngView的用法、路由服务提供者$routeProvider的配置方法等。

之前为大家介绍了Angularjs里面的控制器、内置指令、服务、自定义服务等，今天为大家介绍下路由。

Angularjs路由：

路由<ng-router & ui-router>

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

什么是SPA？

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

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

传统项目中，通过大量的页面之间的跳转，来实现不同的功能的业务处理，如index.html主要用于系统首页数据的展示、login.html页面主要用于用户登录业务的处理，而相对应的regist.html页面主要用于新用户的注册业务的处理，一个项目中会充斥着大量的页面和页面之间的跳转处理，如果项目的业务非常复杂的情况下，网页的开发和维护就会造成大量重复的工作，同时也提升了开发和维护的复杂度。

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

什么是路由？

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

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

ng路由：

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

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

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

指令概述：

指令会创建自己独立的作用域

语法：

<ng-view [onload=”string”] [autoscroll]=”string”></ng-view>

onload:当视图发生改变时执行属性值中的表达式

autoscroll:当视图发生改变时自动触发$anchorScroll事件

事件：

路由视图一旦加载时，就会自动触发$viewContentLoaded事件

路由提供者:$routeProvider
内置服务对象$routeProvider主要用于进行路由配置描述：

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

主要方法：

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

path：路由跳转的路径

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

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

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

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

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angularjs/angular.min.js"></script>
    <script src="js/angularjs/angular-route.js"></script>
</head>
<body>
<ul>
    <li><a href="#!/">首页</a></li>
    <li><a href="#!/login">登录</a></li>
    <li><a href="#!/regist">注册</a></li>
    <li><a href="#!/shop">购物车</a></li>
</ul>
<div ng-view></div>
</body>
<script>
     var a=angular.module("App",["ngRoute"]);
    a.config(["$routeProvider",function($routeProvider) {
        $routeProvider
                .when("/",{
                    templateUrl:"js/temp/index.html"
                }).when("/login",{
                     templateUrl:"js/temp/login.html"
                }).when("/regist",{
                    templateUrl:"js/temp/regist.html"
                }).when("/shop",{
                    templateUrl:"js/temp/shop.html"
                }).otherwise("/");
    }])
</script>
</html>