3W1Y之路由

阿脆脆脆脆脆

于 2017-05-02 20:51:28 发布

阅读量483

点赞数

本文链接：https://blog.csdn.net/CUILINA1994/article/details/71102131

版权

3W1Y

路由是什么？

路由用在哪里?

为什么要用路由？

怎么使用路由？

路由是用来根据url切换页面的内容，需要和ng-view配合使用，好处是可以实现局部刷新。

用法如下：

<div ng-view></div>

路由主要用在的地方：

手机端、移动端或者页面较多的网站

用路由进行切换时，不用再发起HTTP请求了。体验比原来好。速度也会有一定成度的提升。同时也会节省空间。

最后但同样重要的是怎么使用路由啊？

app.config()函数主要用于进行《配置信息》的添加

$routeProvider:AngularJS提供的用于进行路由配置的内置服务

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

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

主页面一般是这样写的（点击首页、登陆、注册、购物车可以改变首页部分内容）

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>系统单页面</title>
    <!-- 引入核心框架文件 -->
    <script src="../js/lib/AngularJS/angular.min.js"></script>
    <!-- 引入Angular路由模块文件 -->
    <script src="../js/lib/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="#!/shopcart">购物车</a></li>
</ul>
<div ng-view></div>
<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>
</body>
</html>

main.html代码如下

<h1>系统首页</h1>

<ul>
    <li><a href="">登陆</a></li>
    <li><a href="">登陆</a></li>
    <li><a href="">登陆</a></li>
    <li><a href="">登陆</a></li>
</ul>

<ul>
    <li><a href="">注册页面</a></li>
    <li><a href="">注册页面</a></li>
    <li><a href="">注册页面</a></li>
    <li><a href="">注册页面</a></li>
    <li><a href="">注册页面</a></li>
    <li><a href="">注册页面</a></li>
</ul>
shopcart.html
<ul>
    <li><a href="">购物车页面</a></li>
    <li><a href="">购物车页面</a></li>
    <li><a href="">购物车页面</a></li>
    <li><a href="">购物车页面</a></li>
    <li><a href="">购物车页面</a></li>
    <li><a href="">购物车页面</a></li>
</ul>
但要注意

在Angular1.5之前，锚链接跳转，使用#/开头即可
 <li><a href="#/">首页</a></li>
<!-- 在Angular1.5开始，锚链接跳转，使用#!/开头即可 -->
<li><a href="#!/">首页</a></li>
。。。明天见

阿脆脆脆脆脆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3W1Y之路由

3W1Y路由是什么？路由用在哪里?为什么要用路由？怎么使用路由？路由是用来根据url切换页面的内容，需要和ng-view配合使用，好处是可以实现局部刷新。用法如下：路由主要用在的地方：手机端、移动端或者页面较多的网站用路由进行切换时，不用再发起HTTP请求了。体验比原来好。速度也会有一定成度的提升。同时也会节省空间。最后但同样重要的是怎么使用路由啊？
复制链接

扫一扫