AngularJs路由以及创建内部HTML

最新推荐文章于 2021-06-19 16:40:48 发布

Mike_8859

最新推荐文章于 2021-06-19 16:40:48 发布

阅读量422

点赞数

本文链接：https://blog.csdn.net/Mike_chao/article/details/78544164

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/angular.js"></script>
		<script type="text/javascript" src="../js/angular-route.js"></script>
		<script type="text/javascript">
			//创建AngularJS主应用程序，注入路由的支持服务
			var app = angular.module("myApp",["ngRoute"]);
			
			//使用config配置函数，配置路由规则
			app.config(["$routeProvider",function($routeProvider){
				$routeProvider
				.when("/",{
					//template:"<h3>我是主页</h3>"
					templateUrl:"home.html",
					controller:"homeCtrl",
				})
				.when("/goods",{
					//template:"<h3>我是商品页面</h3>"
					templateUrl:"goods.html",
					controller:"goodsCtrl",
				})
				.when("/car",{
					template:"<h3>我是购物车</h3>"
				})
				.when("/me",{
					//template:"<h3>个人中心</h3>"
					templateUrl:"update.html",
					controller:"updateCtrl",
					
				})
				.otherwise({redirectTo:"/"});
			}]);
			
			app.controller("homeCtrl",function($scope){
				$scope.name = "张三";
			});
			app.controller("updateCtrl",function($scope){
				$scope.name = "李四";
			});
			app.controller("goodsCtrl",function($scope){
				
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="homeCtrl">
		<ul>
			<li><a href="#/">主页面</a></li>
			<li><a href="#/goods">商品</a></li>
			<li><a href="#/car">购物车</a></li>
			<li><a href="#/me">个人中心</a></li>
			<li><a href="#/asdfas">其他</a></li>
		</ul>
		<!--创建内部HTML文件-->
		<script type="text/ng-template" id="home.html">
			<h3>我是主页</h3>
			<br />
			欢迎{{name}},登录成功!!!
		</script>
		<script type="text/ng-template" id=update.html>
		<h3>个人中心</h3>
			<form>
				用户名：<input type="text" value="{{name}}" disabled="disabled" /><br/><br/>
				旧密码：<input type="text" placeholder="请输入旧密码" /><br/><br/>
				新密码：<input type="text" placeholder="请输入新密码" /><br/><br/>
				验证密码:<input type="text" placeholder="请再次输入密码" /><br/><br/>
				<input type="submit" value="修改信息" />
			</form>
		</script>
		
		<script type="text/ng-template" id="goods.html">
			<h3>我是商品页面</h3>
			<br />
			<img src="../img/1.jpg"/>
			<img src="../img/2.jpg"/>
			<img src="../img/3.jpg"/>
			<img src="../img/4.jpg"/>
			<img src="../img/5.jpg"/>
			<img src="../img/x.jpg"/>
		</script>
		<div ng-view style="width: 300px; height: 300px; border: 1px solid blue;">
			
		</div>
		
		
		
		
	</body>
</html>