jQuery简单实现前端路由

最新推荐文章于 2023-03-23 07:11:53 发布

拉莫帅

最新推荐文章于 2023-03-23 07:11:53 发布

阅读量6.9k

点赞数

分类专栏： AngularJs、jQuery、JavaScript 文章标签： jQuery html

本文链接：https://blog.csdn.net/chen_md/article/details/83272351

版权

AngularJs、jQuery、JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

核心内容：

<!DOCTYPE html>
<html ng-app="App">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body ng-controller="Democtrl">
		<div>
			<a href="#/aaa1">首页</a>
			<a href="#/bbb">个人</a>
			<a href="#/ccc">我的</a>
		</div>
		<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>
			var App = angular.module("App",["ngRoute"]);
			App.config(["$routeProvider",function($routeProvider){
				$routeProvider.when("/aaa1",{template:'<p>aaaaaaa</p>{{result}}'})
				.when("/bbb",{template:'<p>bbbb</p>{{result}}'})
				.when("/ccc",{template:'<p>cccccc</p>{{result}}'})
				.otherwise({redirectTo:'/aaa1'});
			}]);
			
			App.controller("Democtrl",function($scope){
				$scope.result ="hello World";
			});
		</script>
	</body>
</html>