AngularJS 路由实例

最新推荐文章于 2020-07-07 07:01:00 发布

原创最新推荐文章于 2020-07-07 07:01:00 发布 · 276 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS实现的简单路由应用案例。该案例通过设置不同的路由规则展示多个页面，包括首页、电脑分类页面和打印机页面等。文章通过具体的HTML和JavaScript代码展示了如何配置和使用AngularJS的路由功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	</head>
	<body ng-app='routingDemoApp'>

	<h2>AngularJS 路由应用</h2>
	<ul>
	<li><a href="#/">首页</a></li>
	<li><a href="#/computers">电脑</a></li>
	<li><a href="#/printers">打印机</a></li>
	<li><a href="#/blabla">其他</a></li>
	</ul>

	<div ng-view></div>
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
	<script>
	angular.module('routingDemoApp',['ngRoute'])
	.config(['$routeProvider', function($routeProvider){
	$routeProvider
	.when('/',{template:'这是首页页面'})
	.when('/computers',{template:'这是电脑分类页面'})
	.when('/printers',{template:'这是打印机页面'})
	.otherwise({redirectTo:'/'});
	}]);
	</script>


	</body>
	</html>