📅 最后修改于: 2023-12-03 14:59:19.054000 🧑 作者: Mango
在AngularJS中，路由的概念使得前端可以实现类似后端的控制。路由可以让不同的URL路径显示不同的内容。在一个应用程序中，路由可以将视图与特定的模型分离开来。当用户在应用程序中移动时，路由可以确保URL与当前视图相匹配。
在本教程中，我们将学习如何使用AngularJS更改路由。我们将通过一个示例应用程序对此进行演示，该应用程序将具有与AngularJS模块、控制器和视图相关的路由。
首先，我们需要设置我们的应用程序。在本教程中，我们将使用AngularJS 1.7版本。我们将创建一个名为“myApp”的模块，并将其附加到我们的HTML文档中。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Routing Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
</script>
</head>
<body>
<h1>Welcome to my AngularJS Routing Tutorial</h1>
<a href="#/">Home</a>
<a href="#/contact">Contact</a>
<div ng-view></div>
</body>
</html>
在这段代码中，我们使用ng-app指令来指定我们的应用程序模块，我们还为我们的模块创建了一个新的JavaScript对象。在我们的HTML文档中，我们还添加了两个超链接，分别指向“Home”和“Contact”，并在div标记中添加了ng-view指令。
我们现在需要在我们的模块中添加路由。我们可以通过$routeProvider服务来完成此操作。
在我们的模块中，我们需要使用$routeProvider服务配置路由。首先，让我们将ngRoute模块添加到我们的应用程序中。
var app = angular.module("myApp", ["ngRoute"]);
接下来，我们需要使用$routeProvider服务配置路由。我们将添加两个路由：一个是/路径的主页，另一个是/contact路径的联系页面。
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html"
})
.when("/contact", {
templateUrl : "contact.html"
});
});
在这段代码中，我们使用config方法来配置我们的应用程序。我们使用$routeProvider服务添加了两个路由，when方法用于指定URL路径，templateUrl用于指定路由所对应的模板文件。
我们还需要创建“home.html”和“contact.html”文件。这些文件将显示在我们的应用程序中。在本教程中，我们将仅创建一个空白模板文件。
<!-- home.html -->
<h2>Home Page</h2>
<!-- contact.html -->
<h2>Contact Page</h2>
我们现在已经设置了我们的应用程序和路由，我们需要创建控制器，将我们的数据与视图绑定。
在我们的应用程序中，我们需要一个控制器来将我们的数据与视图绑定。我们将创建一个名为“myController”的控制器，并将其附加到我们的模块中。
app.controller("myController", function($scope) {
// add controller logic here
});
在我们的控制器中，我们可以通过$scope服务来添加数据。在本教程中，我们将仅添加一个字符串。
app.controller("myController", function($scope) {
$scope.message = "Welcome to my AngularJS Routing Tutorial";
});
我们现在已经设置了我们的应用程序、路由和控制器。我们需要将我们的数据和视图绑定。
在我们的控制器中，我们已经为我们的视图添加了一个字符串。现在，我们需要在HTML中将我们的数据和视图绑定。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Routing Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.js"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html"
})
.when("/contact", {
templateUrl : "contact.html"
});
});
app.controller("myController", function($scope) {
$scope.message = "Welcome to my AngularJS Routing Tutorial";
});
</script>
</head>
<body>
<h1>{{ message }}</h1>
<a href="#/">Home</a>
<a href="#/contact">Contact</a>
<div ng-view></div>
</body>
</html>
在这段代码中，我们将我们的模块和控制器添加到了我们的HTML文档中。在我们的<h1>标记中，我们使用{{ message }}绑定了我们的数据。在ng-view标记中，我们将我们的路由配置用于显示相应的视图。
我们现在已经完成对AngularJS的路由的演示。但是在实际项目中，我们需要了解更多的路由配置和选项。请参阅官方文档以获取更多信息。