AngularJS 路由以及模块配置

最新推荐文章于 2022-04-29 17:32:38 发布

心郎

最新推荐文章于 2022-04-29 17:32:38 发布

阅读量9.8k

点赞数 1

分类专栏：前段_angularjs

本文链接：https://blog.csdn.net/u011301203/article/details/53236671

版权

前段_angularjs 专栏收录该内容

18 篇文章 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>
<!--
	路由:
		一个应用是由若个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图 ，路由则是实现这一功能的关键.
		
		在后端开发中通过URL地址可以实现页面（视图）的切换，但是AngularJS是一个纯前端MVC框架，
		在开发单页面应用时，所有功能都在同一页面完成，所以无需切换URL地址（即不允许产生跳转），
		但Web应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，
		通过锚点（页内跳转）可以实现这一点。
	
	路由参数:
		1、提供两个方法匹配路由，分别是when和otherwise，when方法需要两个参数，
			otherwise方法做为when方法的补充只需要一个参数，其中when方法可以被多次调用。
		2、第1个参数是一个字符串，代表当前URL中的hash值。
		3、第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。
			a、template 字符串形式的视图模板
			b、templateUrl 引入外部视图模板
			c、controller 视图模板所属的控制器
			d、redirectTo跳转到其它路由
		4、获取参数，在控制中注入$routeParams可以获取传递的参数
		
		
	SPA:(Single Page Application)指的是通单一页面展示所有功能，
			通过Ajax动态获取数据然后进行实时渲染， 结合CSS3动画模仿原生App交互，
			然后再进行打包（使用工具把Web应用包一个壳， 这个壳本质上是浏览器）变成一个“原生”应用。
		在PC端也有广泛的应用，通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，
			局部刷新的本质是动态生成DOM，新生成的DOM元素并没有真实存在于文档中，
			所以当再次刷新页面时新添加的DOM元素会“丢失”，通过单页面应可以很好的解决这个问题
			
	SPA(单页面应用条件):
		1、只有一页面
		2、链接使用锚点
		
	hashchange:	
		AngularJs实现单一页面可以通过hashchange事件监听到锚点的变化，
			进而可以实现为不同的锚点准备不同的视图，单页面应用就是基于这一原理实现的。
		AngularJS对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。
		
-->
<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">
			<!--4 布局模板 占位符 -->
			<div ng-view></div>
		</div>

	</div>
	<!-- AngularJS核心框架 -->
	<script src="./libs/angular.min.js"></script>
	<!-- 1 路由模块理解成插件 -->
	<script src="./libs/angular-route.js"></script>
	<script>
	
		//2 实例化模块（App）时，当成依赖传进去（模块名称叫ngRoute）
		var App = angular.module('App', ['ngRoute']);

		//3 配置路由模块，使其正常工作
		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: 'xxx.php',
			}).success(function (info) {
				$scope.items = info; //php 返回值['html', 'css', 'js'];
			});

		}]);

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

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

		}]);

	</script>

</body>
</html>

心郎

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 路由以及模块配置

AngularJS 路由-参数,模块配置,布局模板 body { padding: 0; margin: 0; background-color: #F7F7F7; font-family: Arial; } .wrapper { max-width: 980px; margin: 50px auto; } ul { paddi
复制链接

扫一扫