AngularJS 路由和多视图2

最新推荐文章于 2020-12-25 15:05:41 发布

约德尔蒙

最新推荐文章于 2020-12-25 15:05:41 发布

阅读量414

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/gyq04551/article/details/55667130

版权

AngularJs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
	<meta charset="UTF-8">
	<title>AngularJS 路由和多视图</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #F7F7F7;
			font-family: Arial;
		}

		.wrapper {
			max-width: 980px;
			margin: 50px auto;
		}

		ul {
			padding: 0;
			margin: 0;
			overflow: hidden;
			list-style: none;
			background-color: #000;
			border-radius: 4px;
		}

		li {
			float: left;
			width: 120px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			font-size: 18px;
		}

		li.active {
			background-color: #333;
		}

		li a {
			display: block;
			color: #FFF;
			text-decoration: none;
		}

		.content {
			margin-top: 30px;
			font-size: 24px;
			padding: 0 20px;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<!-- 导航菜单 -->
		<ul>
			<li class="active">
				<a href="#/index">Index</a>
			</li>
			<li>
				<a href="#/introduce">Introduce</a>
			</li>
			<li>
				<a href="#/contact">Contact Us</a>
			</li>
			<li>
				<a href="#/list">List</a>
			</li>
		</ul>
		<!-- 内容 -->
		<div class="content">
			<!-- 占位符 -->
			<div ng-view></div>
		</div>

	</div>
	<!-- AngularJS核心框架 -->
	<script src="./libs/angular.min.js"></script>
	<!-- 路由模块理解成插件 -->
	<script src="./libs/angular-route.js"></script>
	<script>
		// 依赖ngRoute模块
		var App = angular.module('App', ['ngRoute']);

		// 需要对路由模块进行配置，使其正常工作
		App.config(['$routeProvider', function ($routeProvider) {

			$routeProvider.when('/index', {
				// template: '<h1>index Pages!</h1>',
				templateUrl: './abc.html'
			})
			.when('/introduce', {
				template: '<h1>introduce Pages!</h1>'
			})
			.when('/contact', {
				// template: '<h1>contact US Pages!</h1>',
				templateUrl: './contact.html',
				controller: 'ContactController' // 定义控制器
			})
			.when('/list', {
				templateUrl: './list.html', // 视图模板
				controller: 'ListController' // 定义控制器
			})
			.otherwise({
				redirectTo: '/index'
			});

		}]);

		// 列表控制器
		App.controller('ListController', ['$scope', '$http', function ($scope, $http) {
			// 模型数据
			// $scope.items = ['html', 'css', 'js'];

			$http({
				url: '10-02.php',
			}).success(function (info) {
				// console.log(info);

				$scope.items = info;
			});

		}]);

		App.controller('ContactController', ['$scope', '$http', function ($scope, $http) {

			$http({
				url: 'contact.php'
			}).success(function (info) {
				$scope.content = info;
			});

		}]);

	</script>

</body>
</html>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 路由和多视图2

AngularJS 路由和多视图 body { padding: 0; margin: 0; background-color: #F7F7F7; font-family: Arial; } .wrapper { max-width: 980px; margin: 50px auto; } ul { padding: 0;
复制链接

扫一扫