Angular 是一款流行的前端框架，它提供了许多有用的工具和功能，其中 $routeProvider 是其中一个重要的组件。$routeProvider 是 Angular 路由的核心，它允许我们创建单页应用程序，并通过 URL 路径来控制应用程序的不同部分之间的导航。
在本文中，我们将学习如何使用 $routeProvider 来创建 Angular 应用程序，并了解其常用的配置选项和方法。
安装 Angular 和 Angular 路由
首先，我们需要安装 Angular 和 Angular 路由。我们可以通过 npm 来安装它们：
npm install angular npm install angular-route
创建应用程序
接下来，我们需要创建一个 Angular 应用程序。我们可以使用 Angular 的 ng-app 指令来定义应用程序的根元素：
// javascriptcn.com 代码示例 <!DOCTYPE html> <html ng-app="myApp"> <head> <title>My Angular App</title> </head> <body> <div ng-view></div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script> <script src="app.js"></script> </body> </html>
在这个例子中，我们定义了一个名为 myApp 的应用程序，并使用 ng-view 指令来定义应用程序的视图容器。
配置路由
接下来，我们需要配置路由。我们可以使用 Angular 的 $routeProvider 来定义应用程序的路由配置：
// javascriptcn.com 代码示例
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/'
});
});在这个例子中，我们定义了两个路由：一个是根路径 /，另一个是 /about。每个路由都指定了一个 templateUrl 和一个 controller，用于加载视图和控制器。
我们还使用了 otherwise 方法来定义默认路由，如果用户输入的 URL 路径不匹配任何已定义的路由，则会将用户重定向到根路径。
创建控制器和视图
接下来，我们需要创建控制器和视图。我们可以在 app.js 文件中定义控制器和视图：
app.controller('HomeController', function($scope) {
$scope.message = 'Welcome to my home page!';
});
app.controller('AboutController', function($scope) {
$scope.message = 'Learn more about me!';
});在这个例子中，我们定义了两个控制器：HomeController 和 AboutController。每个控制器都定义了一个 $scope 变量，用于在视图中显示数据。
我们还需要创建视图文件 home.html 和 about.html：
<!-- home.html -->
<h1>{{ message }}</h1>
<!-- about.html -->
<h1>{{ message }}</h1>在这个例子中，我们使用 Angular 的模板语法来显示控制器中定义的 $scope 变量。
运行应用程序
最后，我们需要启动应用程序。我们可以使用 Angular 的 ng-app 指令来启动应用程序，并使用 ng-view 指令来定义应用程序的视图容器：
// javascriptcn.com 代码示例 <!DOCTYPE html> <html ng-app="myApp"> <head> <title>My Angular App</title> </head> <body> <div ng-view></div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script> <script src="app.js"></script> </body> </html>
在这个例子中，我们使用 ng-app 指令来启动应用程序，并使用 ng-view 指令来定义应用程序的视图容器。
总结
在本文中，我们学习了如何使用 Angular 的 $routeProvider 来创建应用程序，并了解了其常用的配置选项和方法。我们还了解了如何创建控制器和视图，并启动应用程序。
通过学习本文，您现在应该能够使用 $routeProvider 来创建自己的 Angular 应用程序，并实现路由导航。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6572b832d2f5e1655dbab4fb