极客教程如何在AngularJS框架中执行一个路由
在这篇文章中，我们将学习如何在AngularJS中执行路由，同时通过代码实例理解其实现。
AngularJS中的路由有助于开发单页应用，这是一个只加载单个页面的Web应用，每次点击鼠标都会更新该页面的一部分，而不是整个页面。这样做的结果是，页面加载速度更快，确保了高性能和高效率的应用。随着用户与网络应用的互动，页面被动态地更新。用户可以浏览不同的页面，而无需重新加载页面。由于路由是在同一个HTML页面上完成的，用户会觉得他们没有离开过这个页面。在AngularJS中，路由允许在ngRoute模块和$routeProvider的帮助下，为网络应用中的不同内容创建不同的URLs。
ng-route模块用于路由到单页应用中的不同页面，而不需要重新加载页面。当URL被指定时，路由引擎会捕获URL并根据定义的路由规则渲染视图。
routeProvider可以用来配置路由，并定义当用户点击一个特定的链接时将会显示什么页面。它接受when()方法，用于向route服务指定新的路由定义，或otherwise()方法，用于设置路由定义，以便在没有路由定义匹配时改变路由。
步骤:
- 添加对angular-route.js的引用。这一步是必须的，因为这个JavaScript文件有路由所需的所有主要模块。
语法:
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js”></script>
- 创建一个应用模块并指定ngRoute为依赖模块，这样就可以在应用中使用路由功能。
语法:
var app = angular.module("myApp",['ngRoute']);
- 使用config()方法配置routeProvider来提供应用程序中的路由。使用routeProvider.when(path, route)方法来配置路由规则。第一个参数是请求的URL，第二个参数是包含控制器和模板等属性的对象。使用otherwise()方法，如果用户请求的URL与配置的规则不同，则重定向到基本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页面中定义指向路线的链接。
语法:
<a href="#/tutorials">Tutorials</a>
- 在HTML页面的一个div标签内包含ng-view指令，以显示所选路线的内容。
例子 ,在这个例子中，有4个页面需要路由，即:
- Home page
- Tutorials page
- Courses page
- 项目创意页面
当用户使用导航栏浏览这些页面时，我们将确保页面不会重新加载。相反，所选页面的内容会显示在同一页面上。
example1.html:
这是应用程序的主页面。在脚本标签中，已经添加了对angular-route.min.js的引用。这个文件有HTML元素，如标题 “GeeksforGeeks “和导航条。在导航条中，已经指定了路线的链接。它还有一个div标签，其中指定了ng-view指令，以便当用户选择一个页面时，可以显示该特定页面的内容。在script标签中，还添加了对javascript.js文件的引用。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Routing in AngularJS</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js">
</script>
<style>
a {
font-size: 25px;
color: black;
text-decoration: none;
padding-right: 20px;
padding-left: 20px;
}
nav {
background-color: #d0dbd4;
}
h1 {
color: #39ad64;
}
</style>
</head>
<body>
<nav>
<a id="active1" href="#/">Home</a>
<a id="active2" href="#/tutorials">Tutorials</a>
<a id="active3" href="#/courses">Courses</a>
<a id="active4" href="#/projectideas">Project Ideas</a>
</nav>
<h1>GeeksforGeeks</h1>
<div ng-view></div>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
javascript.js:
这个javascript文件包含名为 “myApp “的模块，该模块是在ngRoute模块被指定为依赖模块的地方创建的。使用config()方法，$routeProvider模块已被配置，应用程序中的路由已被提供。对于每个路由，它的URL和控制器被指定。
<script>
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 Encode-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 },
];
});
</script>
home.html:该页用于显示主页上的不同选项。
<style>
#active1 {
background-color: #39ad64;
}
</style>
<h1>Write</h1>
<p>Write articles and get featured</p>
<h1>Practice</h1>
<p>Learn and code with the best industry experts</p>
<h1>Premium</h1>
<p>Get access to ad-free content, doubt assistance and more</p>
tutorials.html： ng-repeat指令被用来创建一个可用的教程列表。在这里，教程的名称取自JavaScript数组 “tutorials”。这个数组已经在javascript.js文件的tutorialsController中定义。
<style type="text/css">
#active2 {
background-color: #39ad64;
}
</style>
<h2>Tutorials</h2>
<ul ng-repeat="x in tutorials">
<li>{{x}}</li>
</ul>
courses.html:这个页面与教程页面类似。这里，ng-repeat指令被用来创建一个课程列表。课程的名称来自于javascript.js文件中定义的 coursesController中名为 “courses “的JavaScript数组。
<style type="text/css">
#active3 {
background-color: #39ad64;
}
</style>
<h2>Courses</h2>
<ul ng-repeat="x in courses">
<li>{{x}}</li>
</ul>
projectideas.html：在这个文件中，我们使用了ng-repeat指令来制作项目想法的列表。项目的名称取自javascript.js文件中projectideasController定义的数组。
<style type="text/css">
#active4 {
background-color: #39ad64;
}
</style>
<h2>Project Ideas</h2>
<ul ng-repeat="x in projectideas">
<li>{{x.course}}</li>
<ul ng-repeat="y in x.projects">
<li>{{y}}</li>
</ul>
</ul>
注意：要运行这些文件，请以相同的文件名保存这些文件，如前所述，并在实时服务器或本地服务器上运行主文件即example1.html。
输出:
AngularJS中的路由
解释：用户可以使用导航条浏览不同的页面。正如我们在输出中看到的，页面没有重新加载，相反，所有的页面，即，主页、教程、课程和项目想法，都在同一个HTML页面上显示。导航栏和标题没有变化。不同网页的内容被显示在 <div>在example1.html文件中使用了ng-view指令的标签。这就是一个单页应用程序的工作方式。
注意：当用户加载页面时，由于$routeProvider函数中的 “否则 “选项，它会加载主页。