AngularJS 路由

最新推荐文章于 2020-12-30 06:40:26 发布

皮皮垚

最新推荐文章于 2020-12-30 06:40:26 发布

阅读量303

点赞数 1

文章标签： angularjs web前端应用 web服务器

本文链接：https://blog.csdn.net/sky_lunar_g/article/details/71101940

版权

什么是路由？

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

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

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

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

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

路由的基本框架：

<script> 
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>

route：路由

app.config()函数是一个配置函数,主要用于进行配置信息的添加。

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

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

when：代表当你访问这个“/”根目录的时候去访问templateUrl中的那个模板。

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

相对应的在html中有以下代码：

<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>系统单页面</title>
    <!-- 引入核心框架文件 -->
    <script src="angular.min.js"></script>
    <!-- 引入Angular路由模块文件 -->
    <script src="angular-route.js"></script>
</head>
<body>
<!-- 在Angular1.5之前，锚链接跳转，使用#/开头即可 -->
<!-- 在Angular1.5开始，锚链接跳转，使用#!/开头即可 -->
<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>

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