上一节:
下一节:

  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>"
    })
});
    尝试一下
上一节:
下一节: