html5_AngularJs路由应用

最新推荐文章于 2019-04-21 12:27:45 发布

绅V科技

最新推荐文章于 2019-04-21 12:27:45 发布

阅读量278

点赞数 1

本文链接：https://blog.csdn.net/Android___vv/article/details/78253199

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <!-- 使用路由需要导入这个包 -->
    <script type="text/javascript" src="angular-route.js"></script>
    <script>
        var app = angular.module("myapp",["ngRoute"]);
        app.config(["$routeProvider",function($routeProvider){
            $routeProvider
                    //id前面加斜杠,不加斜杠没有效果
                    .when("/a",//如果这里只写一个杠,默认运行这个,不用点击
                         {
                             templateUrl:"a.html",//自定义界面,后面加url
                             controller: "homeCtrl"
                         })
                    .when("/b",
                         {   //自己定义的不用写url
                             template:"<div><h2>新闻</h2><hr>新闻页面</div>",
                             controller: "homeCtrl"
                         })
                    .when("/c",
                         {
                             template:"<div><h2>体育</h2><hr>体育页面<br></div>",
                             controller: "homeCtrl"
                         })
                    .when("/d",
                         {
                             template:"<div><h2>游戏</h2><hr>游戏页面<br></div>",
                             controller: "homeCtrl"
                         })
                    .otherwise({redirectTo: "/a"});//选择刚进页面还没有点击显示哪个页面
        }]);

        app.controller("homeCtrl", function ($scope,$routeParams) {
                //获取到的是a标签里的type值
                alert($routeParams['type']);
        });

    </script>
    <style>
        ul li{
            list-style: none;
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body ng-app="myapp">
<h2>AngularJS 路由应用</h2>
<ul>
    <li><a href="#a?type=首页">首页</a></li>
    <li><a href="#b?type=新闻">新闻</a></li>
    <li><a href="#c?type=体育">体育</a></li>
    <li><a href="#d?type=游戏">游戏</a></li>
</ul>
<div style="clear: both"></div>
<ng-view></ng-view>
</body>
</html>