路由

最新推荐文章于 2022-03-23 14:44:01 发布

爱上我的味道

最新推荐文章于 2022-03-23 14:44:01 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/qq_40259191/article/details/78265824

版权

效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <script src="angular.js" type="text/javascript"></script>
    <script src="angular-route.js" type="text/javascript"></script>
    <style type="text/css">
        li{
            list-style: none;
            float: left;
            margin: 8px;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("myApp",["ngrout"]);
        app.config(["$routeProvider",function ($routeProvider) {
            $routeProvider
                .when("/",{
                    templateUrl:"bbs/home.hteml",
                    controller:"defaultCtrl"
                })
                .when("/news",{
                    templateUrl:"bbs/home.hteml",
                    controller:"defaultCtrl"
                })
                .when("/sport",{
                    templateUrl: "http://www.qq.com/",
                    controller: "defaultCtrl"
                })
                .when("/game",{
                    templateUrl:"bbs/home.hteml",
                    controller:"defaultCtrl"
                })
                .otherwise({
                    redirectTo:"/"
                });
        }]);
        app.constructor("homeCtrl",function ($scope) {
        });
        app.constructor("defaultCtrl",function ($sope,$routeParams) {
            console.log("类型"+$routeParams['type']);

            $scope.$on("$routeChangeStart",function (p1, p2) {
                console.log("Route Change Start");
            });
            $scope.$on("$routeChangeSuccess",function (p1, p2) {
                console.log("Route Change Success");
            });
            $scope.$on("$routeChangeError",function (p1, p2) {
                console.log("Route Change Error");
            });
        });
    </script>
</head>
<body ng-app="myApp">
    <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>
    </ul>

    <div style="clear: both"></div>
</body>
</html>

爱上我的味道

关注

0
点赞
踩
0

收藏

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

效果：html>html lang="en">head> meta charset="UTF-8"> title>路由title> script src="angular.js" type="text/javascript">script> script src="angular-route.js" type="text/javasc
复制链接

扫一扫