如何在 AngularJS 框架中执行路由？

在本文中，我们将了解如何在 AngularJS 中执行路由，并通过代码示例了解其实现。

AngularJS 中的路由有助于开发单页应用程序，这是一个仅加载单个页面的 Web 应用程序，每次单击鼠标都会更新页面的一部分而不是整个页面。因此，页面加载速度比确保高性能和高效应用程序更快。当用户与 Web 应用程序交互时，页面会动态更新。用户可以浏览不同的页面而无需重新加载页面。由于路由是在同一个 HTML 页面上完成的，因此用户将体验到他们没有离开该页面。在 AngularJS 中，路由允许在ngRoute模块和$routeProvider的帮助下为 Web 应用程序中的不同内容创建不同的 URL 。

ng-route模块用于路由到单个页面应用程序中的不同页面，而无需重新加载页面。当指定 URL 时，路由引擎会捕获 URL 并根据定义的路由规则呈现视图。

$routeProvider可用于配置路由并定义用户单击特定链接时将显示的页面。它接受when()方法，用于指定 $route 服务的新路由定义，或者else()方法，用于设置路由定义以在没有匹配路由定义时更改路由。

方法：

• 添加对angular-route.js的引用。此步骤是强制性的，因为此 JavaScript 文件具有路由所需的所有主要模块。

句法：

• 创建一个应用程序模块并将ngRoute指定为依赖模块，以便可以在应用程序中使用路由功能。

句法：

var app = angular.module("myApp",['ngRoute']);

• 配置$routeProvider以使用config()方法在应用程序中提供路由。使用$routeProvider.when(path, route)方法配置路由规则。第一个参数是请求 URL，第二个参数是包含控制器和模板等属性的对象。如果用户请求的 URL 与配置的规则不同，请使用else()方法重定向到基本 URL。

句法：

app.config(function ($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "home.html",
    })
    .when("/tutorials", {
      templateUrl: "tutorials.html",
      controller: "tutorialsController",
    })
    .when("/courses", {
      templateUrl: "courses.html",
      controller: "coursesController",
    })
    .when("/projectideas", {
      templateUrl: "projectideas.html",
      controller: "projectideasController",
    })
    .otherwise({ redirectTo: "/" });
});

• 在 HTML 页面中定义指向路由的链接。

句法：

Tutorials

• 在 HTML 页面的 div 标签内包含ng-view指令，以显示所选路由的内容。

示例：在此示例中，有 4 个页面要路由，即：

• 主页
• 教程页面
• 课程页面
• 项目创意页面

当用户使用导航栏浏览这些页面时，我们将确保页面不会重新加载。相反，所选页面的内容显示在同一页面上。

示例1.html：

这是应用程序的主页。在 script 标签中，添加了对angular-route.min.js的引用。该文件具有 HTML 元素，例如标题“GeeksforGeeks”和导航栏。在导航栏中，已指定指向路线的链接。它还有一个 div 标签，其中指定了ng-view 指令，以便当用户选择一个页面时，可以显示该特定页面的内容。在脚本标签中，引用 还添加了javascript.js文件。

HTML

  

    Routing in AngularJS
    
    
    
    
    
        a {
            font-size: 25px;
            color: black;
            text-decoration: none;
            padding-right: 20px;
            padding-left: 20px;
        }
          
        nav {
            background-color: #d0dbd4;
        }
          
        h1 {
            color: #39ad64;
        }
    

  

    
        Home
        Tutorials
        Courses
        Project Ideas
    
    GeeksforGeeks
    
    

javascript.js：

这个 javascript 文件包含模块 命名为“myApp” ，它是在ngRoute 模块被指定为依赖模块的地方创建的。使用 config() 方法，已经配置了$routeProvider模块并提供了应用程序中的路由。对于每个路由，指定其 URL 和要使用的控制器。

Javascript

var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "home.html",
    })
    .when("/tutorials", {
      templateUrl: "tutorials.html",
      controller: "tutorialsController",
    })
    .when("/courses", {
      templateUrl: "courses.html",
      controller: "coursesController",
    })
    .when("/projectideas", {
      templateUrl: "projectideas.html",
      controller: "projectideasController",
    })
    .otherwise({ redirectTo: "/" });
});
app.controller("tutorialsController", function ($scope) {
  $scope.tutorials = [
    "Practice DS and Algo.",
    "Algorithms",
    "Data Structure",
    "Software Designs",
    "CS Subjects",
  ];
});
app.controller("coursesController", function ($scope) {
  $scope.courses = 
  ["Live Courses", 
   "Self-Paced Courses", 
   "School Courses"];
});
app.controller("projectideasController", function ($scope) {
  $scope.c = [
    "Program for face detection",
    "Program for coin detection",
    "Program to blur an image",
    "Program to create a single colored blank image",
  ];
  $scope.java = [
    "A Group chat Application",
    "Generating Password and OTP in Java",
    "Creative Programming in Processing",
  ];
  $scope.python = [
    "Make a Notpad using Tkinter",
    "Color Game using Tkinter in Python",
    "Message Ecode-Decode using Tkinter",
    "Twitter sentiment analysis using Python",
  ];
  
  $scope.projectideas = [
    { course: "C++", projects: $scope.c },
    { course: "Java", projects: $scope.java },
    { course: "Python", projects: $scope.python },
  ];
});

home.html：此页面用于显示主页上可用的不同选项。

HTML

  
Write
  
Write articles and get featured
  
Practice
  
Learn and code with the best industry experts
  
Premium
  
Get access to ad-free content, doubt assistance and more

tutorials.html： ng-repeat指令用于创建可用教程的列表。这里，教程的名称取自 JavaScript 数组“tutorials”。该数组已在 javascript.js 文件的 tutorialsController 中定义。

HTML

Tutorials

    
{{x}}

course.html：此页面类似于教程页面。在这里， ng-repeat指令用于创建课程列表。课程名称取自 javascript.js 文件中定义的 coursesController 中名为“courses”的 JavaScript 数组。

HTML

Courses

    
{{x}}

projectideas.html：在这个文件中，我们使用了ng-repeat指令来制作项目创意列表。项目名称取自 javascript.js 文件中 projectideasController 中定义的数组。

HTML

Project Ideas

    
{{x.course}}
    

        
{{y}}
    

注意：要运行这些文件，请使用相同的文件名保存这些文件，如上所述，然后在实时服务器或本地服务器上运行主文件，即 example1.html。

输出：

AngularJS 中的路由

解释：用户可以使用导航栏浏览不同的页面。正如我们在输出中看到的那样，页面没有重新加载，而不是所有页面，即主页、教程、课程、项目想法，都显示在同一个 HTML 页面上。导航栏和标题不会改变。不同网页的内容显示在

标记中，其中在 example1.html 文件中使用了ng-view指令。这就是单页应用程序的工作方式。

注意：当用户加载页面时，由于 $routeProvider函数中的“否则”选项，它会加载主页。