angularJS的路由

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="angular.js" type="text/javascript"></script>
    <script src="angular-route.js" type="text/javascript"></script>
    <title>路由</title>
    <style type="text/css">
        li {
            list-style: none;
            float: left;
            margin: 8px;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("myApp", ["ngRoute"]);

app.config(["$routeProvider", function ($routeProvider) {

//templateURL是自己创建的网页地址
            $routeProvider
                    .when("/", {
                        templateUrl: "bbs/home.html",
                        controller: "homeCtrl"
                    })
                    .when("/news", {
                        templateUrl: "bbs/news.html",
                        controller: "defaultCtrl"
                    })
                    .when("/sport", {
                        // templateUrl: "bbs/sport.html",
                        templateUrl: "http://www.qq.com/",
                        controller: "defaultCtrl"
                    })
                    .when("/game", {
                        templateUrl: "bbs/game.html",
                        controller: "defaultCtrl"
                    })
                    .otherwise({
                        redirectTo: "/"
                    });
        }]);

app.controller("homeCtrl", function ($scope) {
});

app.controller("defaultCtrl", function ($scope, $routeParams) {
console.log("类型：" + $routeParams['type']);

            $scope.$on("$routeChangeStart", function (event, current) {
                console.log("Route Change Start");
            });

            $scope.$on("$routeChangeSuccess", function (event, current) {
                console.log("Route Change Success");
            });

            $scope.$on("$routeChangeError", function (event, current) {
                console.log("Route Change Error");
            });
        });
    </script>
</head>
<body ng-app="myApp">
<ul>
    <li><a href="#/">首页</a></li>
    <li><a href="#/news?type=国际新闻">新闻</a></li>
    <li><a href="#/sport?type=NBA">体育</a></li>
    <li><a href="#/game?type=王者荣耀">游戏</a></li>
    <li><a href="#/other">其他</a></li>
</ul>

<ng-view></ng-view>
</body>
</html>

猜你喜欢