路由小案例

最新推荐文章于 2024-01-25 10:00:00 发布

PremierAmour

最新推荐文章于 2024-01-25 10:00:00 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/PremierAmour/article/details/78859980

版权

准备工作
angular.min.js
angular-route.js

这里写图片描述

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>路由</title>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
        <!--
            路由：
                路线
            通过超链接，连接不同的页面。
            #,在浏览器中，#后面的会被忽略掉
            点击不同的超链接，加载不同的页面

            子页面：
                就是要加载到主页面的页面

            混合开发，其实就是开发单页面应用。

            //路由三个时间
            .页面开始加载的时间
            路由有几个常用的事件：

            $routeChangeStart：这个事件会在路由跳转前触发

            $routeChangeSuccess：这个事件在路由跳转成功后触发

            $routeChangeError：这个事件在路由跳转失败后触发

        -->
        <style type="text/css">
            ul{
                list-style: none;
            }
            ul li{
                float: left;
                width: 60px;
            }
            a{
                text-decoration: none;
            }

        </style>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">

        <ul>
            <li><a href="#/">主頁</a></li>
            <li><a href="#/goods">購物車</a></li>
            <li><a href="#/me">我的</a></li>
        </ul>
        <br>
        <!--<ng-view></ng-view>-->
        <!--
            ng-view是个容器，将子页面放入这里
        -->
        <div ng-view>

        </div>
        <script type="text/javascript">
            var mo = angular.module("myApp",["ngRoute"]);//将路由对象注入模块儿
            mo.controller("myCtrl",function($scope){



            })
            //配置路由
            //          $routeProvider 内置对象，配置路由的
            //templateUrl加载路径
            mo.config(function($routeProvider){

//              $routeProvider.when("/",{templateUrl:"zhuye.html"});
//              
//              $routeProvider.when("/goods",{templateUrl:"goods.html"})
//              
//              $routeProvider.when("/me",{templateUrl:"me.html"})
                $routeProvider.when("/",{template:"我是主页"}).when("/goods",{templateUrl:"goods.html"}).when("/me",{templateUrl:"me.html"});

            });
        </script>
    </body>
</html>

goods.html

<div id="">
    我是购物车
</div>

me.html

<div id="">
    我的
</div>

zhuye.html

<style type="text/css">
    .img0{
        width: 400px;
        height: 300px;
    }
</style>

<img src="img/a.jpg" class="img0"/>
<div class="title">
    我是主页
</div>

PremierAmour

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由小案例

准备工作 angular.min.js angular-route.js index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>路由</title> <script src="js/angular.min.js" type="tex
复制链接

扫一扫