极客教程在AngularJS中$routeProvider的作用是什么
在这篇文章中，我们将看到routeProvider在AngularJS中的作用，同时通过实例了解基本实现。 路由使我们能够创建单页应用程序。为此，我们使用ng-view和ng-template指令，以及routeProvider服务。我们使用routeProvider来配置路由。config()需要一个以routeProvider为参数的函数，路由配置就在这个函数里面。$routeProvider是一个简单的API，接受when()或 otherwise()方法。我们需要安装ngRoute模块。
例子1：这个例子描述了AngularJS中$routeProvide r的基本用法。
<!DOCTYPE html>
<html>
<head>
<title>
Detecting the route change in AngularJS
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Detecting the route change in AngularJS
</h3>
<div ng-app="mainApp">
<p>
<a href="#addStudent">
Add Student
</a>
</p>
<p>
<a href="#viewStudents">
Display Student
</a>
</p>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.htm">
<h2> Add Student </h2> {{message}}
</script>
<script type="text/ng-template" id="viewStudents.htm">
<h2> Display Student </h2> {{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(
['routeProvider', function(routeProvider) {
routeProvider.when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function(scope) {
scope.message = "Add The Students";
});
mainApp.controller('ViewStudentsController', function(scope) {
$scope.message = "Display all the students";
});
</script>
</body>
</html>
解释： routeProvider是config（mainApp模块）下的一个函数，使用键为’routeProvider’。$routeProvider.when定义了URL”/addStudent”。默认视图是由 “否则 “设置的。视图使用 “控制器”。
输出：从输出中，注意到点击给定链接时的URL和内容变化。
如何配置$route供应商
routeProvider创建了route服务。通过在route服务之前配置routeProvider，我们可以在HTML模板中设置将被显示的路线。$routeProvider是在调用when()和 otherwise()函数的帮助下配置的。
- when()函数将路由路径和一个JavaScript对象作为参数。
- else()需要一个JavaScript对象作为参数。
在AngularJS中配置路由的语法：
var app = angular.module("appName", ['ngRoute']);
app.config(function(routeProvider) {routeProvider.when('/1stview', {
templateUrl: '1stview.html',
controller: 'Controller1'
}).when('/view2', {
templateUrl: '2ndview.html',
controller: 'Controller2'
}).otherwise({
redirectTo: '/1stview'
});
});
这里，Path是hash(#)符号之后的URL。
该路线包含两个属性。
- templateUrl
- controller
例子2：在这个例子中，$routeProvider被用来定义用户点击链接时的页面。
<!DOCTYPE html>
<html>
<head>
<title>
Detecting the route change in AngularJS
</title>
<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.js">
</script>
</head>
<body ng-app="myApp">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Role of routeProvider in AngularJS</h3>
<p>
<a href="#/!"> GFG</a>
</p>
<p>
Click on the links below.
</p>
<a href="#!C">Code 1</a>
<a href="#!C++">Code 2</a>
<div ng-view></div>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.config(function(routeProvider) {
$routeProvider.when('/', {
templateUrl: 'main.htm',
}).when('/C', {
templateUrl: 'C.htm',
}).when('/C++', {
templateUrl: 'C++.htm',
});
});
</script>
</body>
</html>
输出：从输出中，注意到点击给定链接时的URL变化。
