溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在AngularJS中實現多級路由，你需要使用ngRoute模塊
首先，確保在你的項目中已經包含了AngularJS和ngRoute模塊的腳本文件。你可以從以下鏈接下載它們：
在你的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>
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模板和一個控制器。
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!";
});
home.html、about.html和contact.html），并在其中添加一些內容。例如，home.html的內容如下：<h1>{{message}}</h1>
現在，當用戶訪問不同的URL時，AngularJS將根據配置的路由將相應的模板插入到<div ng-view></div>元素中。這樣，你就可以在AngularJS中實現多級路由了。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
