angularJS路由

墨蓝 2022-06-07 08:41 223阅读 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 路由 就通过 **\# + 标记** 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

**例图：**

![Center][]

**源码：**

<!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>

[Center]: /images/20220607/2bf30191b9ff4c1f8ce4ee27f9123f51.png