angularJS路由

最新推荐文章于 2023-12-29 23:39:14 发布

xy8199

最新推荐文章于 2023-12-29 23:39:14 发布

阅读量194

点赞数

分类专栏： JavaScript 文章标签： angular javascript html url

本文链接：https://blog.csdn.net/xy8199/article/details/78252817

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

AngularJS 路由

本章节我们将为大家介绍 AngularJS 路由。

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

例图：

源码：

<!DOCTYPE html>
<html lang="en">
<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) {
            $routeProvider
                    .when("/index", {template: "<div><h2>首页</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></div>"})
                    .when("/news", {template: "<div><h2>新闻页面</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></div>"})
                    .when("/sport", {template: "<div><h2>体育页面</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></div>"})
                    .when("/game", {template: "<div><h2>游戏页面</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></div>"})
                    .otherwise({template: "<div><h2>404 Page Not Found!</h2><hr><br><br><br><br><br><br><br><br><br><br><br><br></div>"});
        }]);
    </script>
</head>
<body ng-app="myApp">
<ul>
    <li><a href="#/index">首页</a></li>
    <li><a href="#/news">新闻</a></li>
    <li><a href="#/sport">体育</a></li>
    <li><a href="#/game">游戏</a></li>
    <li><a href="#/other">其他</a></li>
</ul>

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

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