AngularJs中路由ngRoute的使用

最新推荐文章于 2021-06-05 06:32:36 发布

云兮.

最新推荐文章于 2021-06-05 06:32:36 发布

阅读量280

点赞数 1

分类专栏： js 文章标签：路由

本文链接：https://blog.csdn.net/qq_42219543/article/details/80859586

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				font-size: 13px;
				color: #696969;
			}
			
			a {
				text-decoration: none;
				color: #696969;
			}
			
			#aa {
				float: left;
				margin-left: 100px;
			}
			
			span {
				margin-right: 20px;
			}
			
			#big {
				width: 1000px;
				margin: 0 auto;
			}
			
			#right {
				float: right;
				margin-right: 100px;
			}
			
			#page {
				width: 1000px;
				height: 500px;
				margin: 0 auto;
				background-color: whitesmoke;
			}
			
			#head {
				width: 1000px;
				height: 40px;
				line-height: 40px;
				background-color: whitesmoke;
			}
		</style>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
		<div id="big">
			<div id="head">
				<span id="aa">我的站点</span>
				<div id="right">
					<span>
						<img src="img/1101140.jpg" width="15px"/>
						<a href="#/home">主页</a>
					</span>
					<span>
						<img src="img/1101140.jpg" width="15px"/>
						<a href="#/about">关于我们</a>
					</span>
					<span>
						<img src="img/1101140.jpg" width="15px"/>
						<a href="#/contact">联系我们</a>
					</span>
				</div>

			</div>

			<!--
				显示不同的url对应的内容
			-->
			<div id="page" ng-view></div>
		</div>

		<script type="text/javascript">
			var app = angular.module("myApp", ["ngRoute"]);
			app.controller("myCtrl", function($scope) {

			})

			//配置路由
			app.config(["$routeProvider", function($routeProvider) {
				$routeProvider
					.when("/contact", {
						templateUrl: "contact.html"
					})
					.when("/about", {
						templateUrl: "about.html"
					})
					.when("/home", {
						templateUrl: "home.html"
					})
					.otherwise({
						redirectTo: "/home"
					});
			}]);
		</script>
	</body>

</html>

云兮.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs中路由ngRoute的使用

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/angular.min.js" type="text/javascript" c
复制链接

扫一扫

专栏目录