点击切换

最新推荐文章于 2019-03-14 15:32:24 发布

独2无1

最新推荐文章于 2019-03-14 15:32:24 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41758430/article/details/80175394

本文介绍了一个使用AngularJS实现页面路由的实例，展示了如何配置不同页面的路由规则，并通过导航链接进行页面跳转。同时，还介绍了如何加载外部HTML模板。

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

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript" src="js/angular.min.js" ></script>
	<script type="text/javascript" src="js/angular-route.js" ></script>

	<script type="text/javascript">
	//申明angular作用域时，引入路由
	var app = angular.module("myApp",['ngRoute']);
	app.controller("myCtrl",function($scope){

	})
	//创建路由
	app.config(["$routeProvider",function($routeProvider){

	// home是主页的路由
	$routeProvider
	.when("/home",
	{
	template:"<h1>我是主页，我是大标题</h1>"
	}
	).when("/goods",
	{
	templateUrl:"goods.html"
	}
	).when("/myself",
	{
	templateUrl:"myself.html"
	}
	).otherwise({redirectTo:"/home"});
	}]);
	</script>
	<style type="text/css">
	div{
	width: 1200px;
	height: 200px;
	background-color: red;
	}
	</style>
	</head >
	<body ng-app="myApp" ng-controller="myCtrl">
	<nav>
	<a href="#/home">主页</a>
	<a href="#/goods">商品</a>
	<a href="#/myself">个人中心</a>
	<a href="#/other">其他</a>
	</nav>

	<!--
	用来显示路由到的界面的view组件,,ng-view是标记
	-->
	<div ng-view></div>
	</body>
	<!--
	通过script type="text/ng-template"定义angular路由的模板，，id是引用的参照
	-->
	<script type="text/ng-template" id="myself.html">
	<h1>我是个人中心</h1>
	姓名：<input type="text" ng-model="uname" /><br />
	年龄：<input type="text" ng-model="uage" /><br />
	</script>
	</html>