如何在AngularJS中实现多级路由

发布时间：2024-10-03 08:02:51 作者：小樊
来源：亿速云阅读：84

在AngularJS中实现多级路由，你需要使用ngRoute模块

首先，确保在你的项目中已经包含了AngularJS和ngRoute模块的脚本文件。你可以从以下链接下载它们：
- AngularJS: https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
- ngRoute: https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js
在你的HTML文件中，将ng-app指令添加到主元素（通常是<html>或<body>标签），并将ng-controller指令添加到包含路由视图的子元素。例如：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="mainController">
  <!-- 路由视图将在这里显示 -->
  <div ng-view></div>
</body>
</html>

在你的JavaScript文件（例如app.js）中，创建一个名为myApp的AngularJS模块，并将其与ng-app指令关联。然后，注入ngRoute模块作为依赖项：

var app = angular.module("myApp", ["ngRoute"]);

配置路由。首先，定义一个名为$routeProvider的服务，然后使用其when()方法为每个路由级别定义URL模式、控制器和模板。例如，以下代码定义了一个具有两个级别的路由：

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl : "home.html",
      controller : "homeController"
    })
    .when("/about", {
      templateUrl : "about.html",
      controller : "aboutController"
    })
    .when("/contact", {
      templateUrl : "contact.html",
      controller : "contactController"
    })
    .otherwise({
      redirectTo: '/'
    });
});

在这个例子中，我们有三个路由级别：首页（“/”）、关于页面（“/about”）和联系页面（“/contact”）。每个级别都有一个对应的HTML模板和一个控制器。

创建控制器。在你的JavaScript文件中，为每个路由级别创建一个控制器，并在模板中使用ng-controller指令将其与视图关联。例如：

app.controller("homeController", function($scope) {
  $scope.message = "Welcome to the home page!";
});

app.controller("aboutController", function($scope) {
  $scope.message = "Welcome to the about page!";
});

app.controller("contactController", function($scope) {
  $scope.message = "Welcome to the contact page!";
});

创建模板。为每个路由级别创建一个HTML模板文件（例如home.html、about.html和contact.html），并在其中添加一些内容。例如，home.html的内容如下：

<h1>{{message}}</h1>

现在，当用户访问不同的URL时，AngularJS将根据配置的路由将相应的模板插入到<div ng-view></div>元素中。这样，你就可以在AngularJS中实现多级路由了。

如何在AngularJS中实现多级路由

相关阅读