AngularJS路由

Mike_8859

于 2017-11-15 15:24:07 发布

阅读量244

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Mike_chao/article/details/78541251

//源码

<!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">
			var app = angular.module("myApp", ['ngRoute']);
			/*app.controller("myCtrl", function() {

			});*/
			
			app.config(["$routeProvider",function($routeProvider){
				$routeProvider
				.when('/',{template:"这是首页页面"})
				.when("/computers",{template:"这是电脑分类页面"})
				.when("/printers",{template:"这是零食页面"})
				.otherwise({redirectTo:"/"});
				
			}]);
			
		</script>
	</head>

	<body ng-app="myApp">
		<ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">零食</a></li>
            <li><a href="#/blabla">其他</a></li>
            <div ng-view style="border: 1px solid blue; width: 200px;height: 200px;" ></div>
        </ul>
	</body>

</html>