专注Java教育13年 全国咨询/投诉热线:400-8080-105
首页 hot资讯 Angularjs路由详解

Angularjs路由详解

更新时间:2022-06-16 09:40:53 来源:动力节点 浏览125次

当用户想要导航到应用程序中的不同页面但仍希望它是单页应用程序时,使用 AngularJS 中的路由。AngularJS 路由使用户能够为应用程序中的不同内容创建不同的 URL。ngRoute模块有助于访问应用程序的不同页面,而无需重新加载整个应用程序。

重要的:

$routeProvider 用于配置路由。它有助于定义用户单击链接时要显示的页面。它接受 when() 或 else() 方法。

ngRoute 必须作为依赖项添加到应用程序模块中:

//const app = angular.module("myApp", ["ngRoute"]);

示例 1:仅使用“When”方法

<!DOCTYPE html>
<html>
<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>
<body ng-app="myApp">
<p><a href="#/!">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221234751/geeksforgeeks-logo1.png"
alt="GeeksForGeeks" style="width: 90vw;"></a></p>
<a href="#!courses">Courses@geeksforgeeks</a>
<br>
<a href="#!internships">Internships@geeksforgeeks</a>
<div ng-view></div>
<script>
const app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
	$routeProvider
	.when("/", {
		template : `<h1>Welcome to GeeksForGeeks</h1>
					<p>
					Click on the links to change this content
					</p>`
	})
	.when("/courses", {
		template : `<h1>Courses Offered</h1>
					<p>
						<ul>
						<li>Machine Learning Foundation</li>
						<li>Geeks Classes</li>
						<li>System Design</li>
						</ul>
					</p>`
	})
	.when("/internships", {
		template : `<h1>Hire With Us</h1>
					<p>
						<ul>
						<li>Software Developer</li>
						<li>Technical Content Writer</li>
						<li>Technical Content Engineer</li>
						</ul>
					</p>`
	});
});
</script>
</body>
</html>

输出:

点击前

点击 Courses@GeeksForGeeks 后

点击 Internships@GeeksForGeeks 后

示例 2:“否则”方法也与“何时”一起使用

<!DOCTYPE html>
<html>
<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>
<body ng-app="myApp">
<p><a href="#/!"><img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190221234751/geeksforgeeks-logo1.png"
alt="GeeksForGeeks" style="width: 90vw;"></a></p>
<a href="#!courses">Courses@geeksforgeeks</a>
<br>
<a href="#!internships">Internships@geeksforgeeks</a>
<div ng-view></div>
<script>
const app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
	$routeProvider
	.when("/courses", {
		template : `<h1>Courses Offered</h1>
							<p>
								<ul>
								<li>Machine Learning Foundation</li>
								<li>Geeks Classes</li>
								<li>System Design</li>
								</ul>
							</p>`
	})
	.when("/internships", {
		template : `<h1>Hire With Us</h1>
							<p>
								<ul>
								<li>Software Developer</li>
								<li>Technical Content Writer</li>
								<li>Technical Content Engineer</li>
								</ul>
							</p>`
	})
	.otherwise({
		template : `<h1>Please Select Something!</h1>
							<p>
							Nothing has been selected yet
							</p>`
	});
});
</script>
</body>
</html>					

输出:

点击前

点击 Courses@GeeksForGeeks 后

点击 Internships@GeeksForGeeks 后

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>
返回顶部