AngularJS 路由
AngularJS 路由，当用户想要导航到应用程序中的不同页面，可以使用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：“otherwise”方法也与“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("/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 后
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
