angularjs路由实现导航栏

最新推荐文章于 2022-06-28 10:09:51 发布

Web攻城狮

最新推荐文章于 2022-06-28 10:09:51 发布

阅读量5.3k

点赞数 2

分类专栏： angularjs 文章标签： angularjs 路由路由实现导航栏

本文链接：https://blog.csdn.net/b1244154318/article/details/52685234

版权

angularjs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

angularjs路由实现导航栏

第一种方法:

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>路由</title>
		<style>
			a{
				text-decoration:none; 
			}
		</style>
	</head>
	<body ng-controller="show">
			<div id="wei">
				<a href="#main">首页</a>
				<a href="#intro">公司简介</a>
				<a href="#about">关于</a>
				<a href="#contact">联系我们</a>
			</div>
			<div ng-view></div>
		<script src="//cdn.bootcss.com/angular.js/1.4.9/angular.min.js"></script>
		<script src="//cdn.bootcss.com/angular.js/1.4.9/angular-route.js"></script>

		<script type="text/javascript">
			var app = angular.module('myApp',["ngRoute"]);
			app.config(["$routeProvider",function($routeProvider){
				$routeProvider
				.when("/main",{
					template:"<p>首页{{name}}</p>",
						controller:"show"
				})
				.when("/intro",{
					template:"<p>公司简介{{name}}</p>",
					 controller:"show2"
				})
				.when("/about",{
					template:"<p>关于{{name}}</p>",
					 controller:"show3"
				})
				.when("/contact",{
					template:"<p>联系我们{{name}}</p>",
					controller:"show4"
				})
				// .otherwise({
				// 	redirectTo:"/main"
				// })
				.otherwise("/main")

			}])

			app.controller('show',['$scope','$http',function($scope,$http){
				$scope.name = "啦啦啦,我是卖报的小行家1!";
			}]);
			app.controller('show2',['$scope','$http',function($scope,$http){
				$scope.name = "啦啦啦,我是卖报的小行家2!";
			}]);
			app.controller('show3',['$scope','$http',function($scope,$http){
				$scope.name = "啦啦啦,我是卖报的小行家3!";
			}]);
			app.controller('show4',['$scope','$http',function($scope,$http){
				$scope.name = "啦啦啦,我是卖报的小行家4!";
			}]);
		</script>	
	</body>
</html>

第二种方法:

<!DOCTYPE html>
<html ng-app='myApp'>
	<head>
		<meta charset="UTF-8">
		<title>路由</title>
		<style>
			a{
				text-decoration:none; 
			}
		</style>
	</head>
	<body ng-controller='show'>
			<div id="wei">
				<a href="" ng-click="$location.path('main')">首页</a>
				<a href="" ng-click="$location.path('intro')">公司简介</a>
				<a href="" ng-click="$location.path('about')">关于</a>
				<a href="" ng-click="$location.path('contact')">联系我们</a>
			</div>
			<div ng-view></div>
		<script src="//cdn.bootcss.com/angular.js/1.4.9/angular.min.js"></script>
		<script src="//cdn.bootcss.com/angular.js/1.4.9/angular-route.js"></script>

		<script type="text/javascript">
			var app = angular.module('myApp',["ngRoute"]);
			app.config(["$routeProvider",function($routeProvider){
				$routeProvider
				.when("/main",{
					// template:"<p>首页{{name}}</p>",
					templateUrl:"main.html",
						controller:"show"
				})
				.when("/intro",{
					// template:"<p>公司简介{{name}}</p>",
					templateUrl:"intro.html",
					 controller:"show2"
				})
				.when("/about",{
					// template:"<p>关于{{name}}</p>",
					templateUrl:"about.html",
					 controller:"show3"
				})
				.when("/contact",{
					// template:"<p>联系我们{{name}}</p>",
					templateUrl:"contact.html",
					controller:"show4"
				})
				// .otherwise({
				// 	redirectTo:"/main"
				// })
				.otherwise("/main")

			}])

			app.controller('show',['$scope','$location',function($scope,$location){
				$scope.name = "啦啦啦,我是卖报的小行家1!";
				$scope.$location =$location;
			}]);
			app.controller('show2',['$scope','$location',function($scope,$location){
				$scope.name = "啦啦啦,我是卖报的小行家2!";
				$scope.$location =$location;
			}]);
			app.controller('show3',['$scope','$location',function($scope,$location){
				$scope.name = "啦啦啦,我是卖报的小行家3!";
				$scope.$location =$location;
			}]);
			app.controller('show4',['$scope','$location',function($scope,$location){
				$scope.name = "啦啦啦,我是卖报的小行家4!";
				$scope.$location =$location;
			}]);
		</script>	
	</body>
</html>

四个详情页为:

<p>首页你好{{name}}</p>

<p>首页你好{{name}}</p>

<p>关于你好{{name}}</p>

<p>联系我们你哈{{name}}</p>

Web攻城狮

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs路由实现导航栏

angularjs路由实现导航栏第一种: 路由 a{ text-decoration:none; } 首页公司简介关于联系我们 var app = angular.module('myApp',["ngRoute"]); app.confi
复制链接

扫一扫