$ routeProvider在AngularJS中的作用是什么？

路由允许我们创建单页应用程序。为此，我们使用ng-view和ng-template指令以及$ routeProvider服务。

我们使用$ routeProvider配置路由。

config()使用一个以$ routeProvider作为参数的函数，并且路由配置进入该函数内部。

$ routeProvider是一个简单的API，它可以接受when()或else()方法。

我们需要安装ngRoute模块。

   
      GFG
      
       
      
      
   
     
   
        
      
         
              Add Student
         
              Display Student
         
           
         
            <h2> Add Student </h2>
            {{message}}
         
           
         
            <h2> Display Student </h2>
            {{message}}
         
      
        
      
         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";
         });
      
        
   

解释：

• $ routeProvider是config(mainApp模块)下的一个函数，使用键作为’$ routeProvider’。
• $ routeProvider.when定义URL“ / addStudent”。
• 默认视图由“否则”设置。
• 视图使用“控制器”。

如何配置$ routeprovider?

$ routeProvider将创建$ route服务。

通过在$ route服务之前配置$ routeProvider，我们可以在将显示的HTML模板中设置路由。

$ routeProvider在对when()和else()函数的调用的帮助下进行配置。

when()函数将路由路径和JavaScript对象作为参数。

否则( )将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'  
 });  
}); 

路径是井号(＃)符号后的URL。

路线包含两个属性：

1. templateUrl
2. 控制器

用户单击链接时，可以使用$ routeProvider来定义页面。

    
  
    
   
  
    
         GFG
        Click on the links below.
  
        Code 1
        Code 2
  
        
  
        
            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",
                    });
            });