📅  最后修改于: 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的路由的演示。但是在实际项目中,我们需要了解更多的路由配置和选项。请参阅官方文档以获取更多信息。