AngularJS 路由

  • 定义和用法

    ngRoute 模块可帮助您的应用程序成为单页应用程序。
    如果要导航到应用程序中的其他页面,但又希望该应用程序是 SPA(单页面应用程序),而无需重新加载页面,则可以使用 ngRoute 模块。
    ngRoute 模块将您的应用程序路由到其他页面,而无需重新加载整个应用程序。
    下面示例演示了路由导航跳转到 "red.html","green.html" 和 "blue.html":
    <body ng-app="myApp">
        <p><a href="#/!">Main</a></p>
    
        <a href="#!red">Red</a>
        <a href="#!green">Green</a>
        <a href="#!blue">Blue</a>
    
        <div ng-view></div>
    
        <script>
            var app = angular.module("myApp", ["ngRoute"]);
            app.config(function($routeProvider) {
                $routeProvider
                .when("/", {
                    templateUrl : "main.html"
                })
                .when("/red", {
                    templateUrl : "red.html"
                })
                .when("/green", {
                    templateUrl : "green.html"
                })
                .when("/blue", {
                    templateUrl : "blue.html"
                });
            });
        </script>
    </body>
    
    尝试一下
  • 我需要什么

    为了使您的应用程序准备好进行路由,您必须包括 AngularJS Route 模块:
    <script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>
    
    然后,您必须在应用程序模块中添加 ngRoute 作为依赖项:
    var app = angular.module("myApp", ["ngRoute"]);
    
    现在,您的应用程序可以访问提供 $routeProvider 的 route 模块。
    使用 $routeProvider 在您的应用程序中配置不同的路由:
    app.config(function($routeProvider) {
       $routeProvider
       .when("/", {
           templateUrl : "main.html"
       })
       .when("/red", {
           templateUrl : "red.html"
       })
       .when("/green", {
           templateUrl : "green.html"
       })
       .when("/blue", {
           templateUrl : "blue.html"
       });
    });
    
  • ng-view 指令

    您的应用程序需要一个容器来放置路由提供的内容。
    该容器是 ng-view 指令。
    在您的应用程序中包括 ng-view 指令的三种不同方式:
    第一种方式使用 ng-view 指令:
    <div ng-view></div>
    
    尝试一下
    第二种方式使用 <ng-view></ng-view>
    <ng-view></ng-view>
    
    尝试一下
    第三种方式使用类名 class="ng-view"
    <div class="ng-view"></div>
    
    尝试一下
    应用程序只能具有一个 ng-view 指令,这将是路由提供的所有视图的占位符。
  • $routeProvider 方法

    使用 $routeProvider,您可以定义用户单击链接时要显示的页面。
    下面示例演示了定义一个 $routeProvider
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider
        .when("/", {
          templateUrl : "main.html"
        })
        .when("/china", {
          templateUrl : "china.html"
        })
        .when("/beijing", {
          templateUrl : "beijing.html"
        });
    });
    
    尝试一下
    使用应用程序的 config 方法定义 $routeProvider。 加载应用程序时,将执行 config 方法中注册的工作。
  • Controllers 控制器

    使用 $routeProvider,您还可以为每个 “视图” 定义一个控制器。
    下面示例演示了添加控制器:
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider
        .when("/", {
           templateUrl : "main.html"
        })
        .when("/china", {
           templateUrl : "china.html",
           controller : "chinaCtrl"
        })
        .when("/beijing", {
           templateUrl : "beijing.html",
           controller : "beijingCtrl"
        });
    });
    app.controller("chinaCtrl", function ($scope) {
        $scope.msg = "我爱中国";
    });
    app.controller("beijingCtrl", function ($scope) {
        $scope.msg = "我爱北京";
    });
    
    尝试一下
    “china.html” 和 “beijing.html” 是普通的 HTML 文件,您可以像在 AngularJS 应用程序的任何其他 HTML 部分中一样添加AngularJS 表达式。
    这些文件如下所示:
    <h1>中国</h1>
    <h3>中国是一个强大的国家</h3>
    <p>中国是一个人口众多的国家</p>
    <p>{{msg}}</p>
    
    <h1>北京</h1>
    <h3>北京是中国的首都</h3>
    <p>北京是一个环境优美的城市</p>
    <p>{{msg}}</p>
    
  • Template 模板

    在前面的示例中,我们在 $routeProvider.when 方法中使用了 templateUrl 属性。
    您还可以使用 template 属性,该属性允许您直接在属性值中编写HTML,而不引用页面。
    下面示例演示了编写一个 template 模板:
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
       $routeProvider
       .when("/", {
          template : "<h1>Main</h1><p>点击链接更改此内容</p>"
       })
       .when("/banana", {
          template : "<h1>Banana</h1><p>香蕉中含有约75%的水。</p>"
       })
       .when("/tomato", {
          template : "<h1>Tomato</h1><p>西红柿中约含95%的水。</p>"
       });
    });
    
    尝试一下
  • otherwise 方法

    在前面的示例中,我们使用了 $routeProvider.when 方法。
    您也可以使用 otherwise 方法,这是其他方法都不匹配时的默认路由。
    下面示例演示了如果未单击“Banana”或“Tomato”链接,请告知他们一个默认路由:
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider
        .when("/banana", {
            template : "<h1>Banana</h1><p>香蕉中含有约75%的水。</p>"
        })
        .when("/tomato", {
            template : "<h1>Tomato</h1><p>西红柿中约含95%的水。</p>"
        })
        .otherwise({
            template : "<h1>我是主体内容</h1>"
        })
    });
    
    尝试一下