前端框架AngularJS

最新推荐文章于 2024-02-12 10:00:00 发布

mojingqiao

最新推荐文章于 2024-02-12 10:00:00 发布

阅读量456

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/mojingqiao/article/details/79846799

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

⦁ 1.前端框架

⦁ 1.1 AngularJS简介
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。

⦁ 1.2 AngularJS四大特征

⦁ 1.2.1 MVC 模式

Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。

Model:数据,其实就是angular变量($scope.XX);
View: 数据的呈现,Html+Directive(指令);
Controller:操作数据,就是function,数据的增删改查;

⦁ 1.2.2双向绑定

AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。

⦁ 1.2.3依赖注入

依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象，都可以根据形参名称实现DI.

⦁ 1.2.4模块化设计

高内聚低耦合法则：
1)官方提供的模块 ng、ngRoute、ngAnimate
2)用户自定义的模块 angular.module('模块名',[ ])

⦁ 2.基础指令

采用SpringBoot构建Web项目angularjs-test

⦁ 2.1 表达式

语法格式：{{变量名}}|{{对象.变量名}}

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS表达式</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
	</head>
	<body ng-app>
		{{100 + 100 - 100}}<br/>
		{{100 * 100}}<br/>
		{{100 > 100}}<br/>
	</body>
</html>

执行结果如下：

说明：表达式可以是变量或是运算式。
ng-app 指令定义了 AngularJS 应用的根元素，在根元素的所有子元素中用到指令，angularJs会自动识别。
ng-app 指令在网页加载完毕时会自动初始化应用中的angularJS的指令。

⦁ 2.2 双向绑定

语法格式：ng-model=”变量名”|ng-model=”对象.变量名”

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS双向绑定</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
	</head>
	<body ng-app>
		姓名：<input type="text" ng-model="name"/><br/>
		性别：<input type="text" ng-model="user.sex"/><br/>
		年龄：<input type="text" ng-model="user.age"/><br/>
		{{name}}，您好！，性别：{{user.sex}}，年龄：{{user.age}}
	</body>
</html>

运行效果如下：

说明：ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。

⦁ 2.3 初始化指令

语法格式：ng-init=”变量名=’变量值’;变量名=’变量值’”

使用ng-init指令来对变量初始化：

	<head>
		<title>AngularJS变量初始化</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
	</head>
	<body ng-app ng-init="name='李小华';user.sex='男';user.age=18">
		姓名：<input type="text" ng-model="name"/><br/>
		性别：<input type="text" ng-model="user.sex"/><br/>
		年龄：<input type="text" ng-model="user.age"/><br/>
		{{name}}，您好！，性别：{{user.sex}}，年龄：{{user.age}}
	</body>
</html>

⦁ 2.4 控制器

定义模块语法格式： var 变量名 = angular.module(“模块名”, []);
定义控制器语法格式：
模块变量名.controller(“控制器名”, function($scope){});

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS控制器</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义myApp模块 */
			var myApp = angular.module("myApp",[]);

			/** 为myApp模块添加控制器 */
			myApp.controller("myController", function($scope){
				/** 定义add方法 */
				$scope.add = function(){
					return parseInt($scope.x) + parseInt($scope.y);
				};
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		x：<input type="text" ng-model="x"/><br/>
		y：<input type="text" ng-model="y"/><br/>
		运算结果：{{add()}}
	</body>
</html>
运行结果如下：

ng-controller指定所使用的控制器。
理解 $scope作用域：
$scope 贯穿整个 AngularJS App应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图。

⦁ 2.5 事件指令

⦁ ng-click：单击事件
⦁ ng-dblclick：双击事件
⦁ ng-blur：失去焦点事件
⦁ ng-focus：获取焦点事件
⦁ ng-change：对应onchange改变事件
⦁ ng-keydown：键盘按键按下事件
⦁ ng-keyup：键盘按键按下并松开
⦁ ng-keypress：同上
⦁ ng-mousedown：鼠标按下事件
⦁ ng-mouseup：鼠标按下弹起
⦁ ng-mouseenter：鼠标进入事件
⦁ ng-mouseleave：鼠标离开事件
⦁ ng-mousemove：鼠标移动事件
⦁ ng-mouseover：鼠标进入事件

语法格式：ng-xxx=”控制器中定义的方法名();”;

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS事件指令</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				/** 定义方法 */
				$scope.add = function(){
					$scope.count = parseInt($scope.x) + 
parseInt($scope.y);
				};
				/** 定义方法 */
				$scope.blur = function(){
					alert($scope.x);
				};
				/** 定义方法 */
				$scope.keyup = function(){
					alert($scope.y);
				};
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		x：<input type="text" ng-model="x" ng-blur="blur();"/><br/>
		y：<input type="text" ng-model="y" ng-keyup="keyup()"/><br/>
		<input type="button" value="计算" ng-click="add();"/>
		运算结果：{{count}}
	</body>
</html>

运行结果：

说明：ng-xxx事件指令，绑定控制器的某个方法。

⦁ 2.6 循环数组

语法格式：ng-repeat=”变量名 in 集合或数组”;

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS循环数组</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				/** 定义数组 */
				$scope.list = [100,200,300,400,500];
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<ul>
			<li ng-repeat="item in list">
				{{item}}
			</li>
		</ul>
	</body>
</html>

说明：这里的ng-repeat指令用于循环数组变量。

运行结果如下：

⦁ 2.7 循环对象数组

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS循环对象数组</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				/** 定义数组 */
				$scope.list =[
		  			{name : "李大华", sex : "男", age : 30},
					{name : "李中华", sex : "女", age : 26},
					{name : "李小华", sex : "男", age : 20}];
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<table border="1">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr ng-repeat="u in list">
				<td>{{$index + 1}}</td>
				<td>{{u.name}}</td>
				<td>{{u.sex}}</td>
				<td>{{u.age}}</td>
			</tr>

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS条件指令</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				/** 定义数组 */
				$scope.user = {age : 20};
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<h2 ng-if="user.age <= 20">{{user.age}}</h2>
	</body>
</html>

</table></body></html>

$index：获取迭代时的索引号。

运行结果如下：

⦁ 2.8 条件指令

语法格式：ng-if=”条件表达式”;

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS条件指令</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				/** 定义数组 */
				$scope.user = {age : 20};
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<h2 ng-if="user.age <= 20">{{user.age}}</h2>
	</body>
</html>

运行效果如下：

⦁ 2.9 复选框

⦁ ng-true-value="true": 选中值
⦁ ng-false-value="false": 未选中值
⦁ ng-checked=”true|false”: 是否选中复选框

<!DOCTYPE html>
<html>
	<head>
		<title>checkbox</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				// 第一个复选框的值
				$scope.value1 = false;
				// 第二个复选框的值
				$scope.value2 = "no";
				// 全选复选框的值
				$scope.ck = false;
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<input type="checkbox" 
				ng-model="value1"/>1<br/>
		<input type="checkbox" 
				ng-true-value="yes"
				ng-false-value="no"
				ng-model="value2"/>2<br/>
		{{value1}} ---> {{value2}}
		<hr/>
		<input type="checkbox" ng-model="ck"/>全选<br/>
		<input type="checkbox" ng-checked="ck"/>广州<br/>
		<input type="checkbox" ng-checked="ck"/>深圳<br/>
		<input type="checkbox" ng-checked="ck"/>东莞<br/>
	</body>
</html>

运行结果如下：

⦁ 2.10下拉列表框

⦁ ng-options="元素变量.键 for 元素变量in 数组"：选项值表达式绑定
⦁ ng-selected=”true|false”: 是否选中下拉列表框

<!DOCTYPE html>
<html>
	<head>
		<title>select</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				// 定义下拉列表框需要的数据变量
				$scope.cities = [{id:1, name:'广州市'},
				                 {id:2, name:'深圳市'},
				                 {id:3, name:'珠海市'},
				                 {id:4, name:'东莞市'}];
				
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<select ng-model="city" 
ng-options="city.name for city in cities">
			<option value="">==请选择城市==</option>
		</select>
		{{city.id}}  {{city.name}}
		<hr/>
		
		<select>
			<option value="1">中国</option>
			<option value="2" ng-selected="true">美国</option>
		</select>
	</body>
</html>

运行结果如下：

⦁ 2.11 显示指令

语法格式：ng-show=”true|false”;

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS显示指令</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				// 定义是否显示的变量
				$scope.show = true;
				// 定义方法
				$scope.hideFn = function(){
					$scope.show = !$scope.show;
				};
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<div ng-show="show">我的内容</div>
		<input type="button" value="显示与隐藏" ng-click="hideFn()"/>
	</body>
</html>

ng-show:指令在表达式为 true 时显示指定的HTML元素，否则隐藏指定的 HTML 元素

⦁ 3.工具函数

⦁ 3.1 forEach迭代函数

<!DOCTYPE html>
<html>
	<head>
		<title>forEach函数</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				// 定义数组
				var arrs = [100,200,300,400];
				var res = [];
				// 迭代数组
				angular.forEach(arrs, function(value){
					this.push(value * 10);
				}, res);
				// 定义作用域中的变量
				$scope.dd = res.join(",");
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<div ng-bind="dd"></div>
	</body>
</html>

⦁ 3.2 fromJson把json字符串转化成对象

<!DOCTYPE html>
<html>
	<head>
		<title>fromJson函数</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				var jsonStr = '{"id":1,"name":"李明","age":20}';
				/** 把json字符串转化成json对象 */
				var json = angular.fromJson(jsonStr);
				$scope.dd = json.id + "-" + json.name + "-" + json.age;
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<div ng-bind="dd"></div>
	</body>
</html>

⦁ 3.3 toJson把对象转化成json字符串

<!DOCTYPE html>
<html>
	<head>
		<title>toJson函数</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				var json = {"id":1,"name":"李明","age":20};
				/** 把json对象转化成json字符串 */
				$scope.dd = angular.toJson(json);
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<div ng-bind="dd"></div>
	</body>
</html>

⦁ 4.内置服务

⦁ 4.1 $timeout服务

$timeout 服务对应了window.setTimeout 函数

<!DOCTYPE html>
<html>
	<head>
		<title>$timeout服务</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", 
function($scope,$timeout){
				// $tiemout定时服务
				$timeout(function(){
					$scope.count = 1000;
				},1000);
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		{{count}}
	</body>
</html>

⦁ 4.2 $interval服务

$interval 服务对应了window.setInterval 函数

<!DOCTYPE html>
<html>
	<head>
		<title>$interval服务</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", 
function($scope,$interval){
				$scope.count = 1;
				// $interval定时服务
				$interval(function(){
					$scope.count += 1;
				},1000);
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		{{count}}
	</body>
</html>

⦁ 4.3 $watch监听服务

$watch持续监听某变量的变化，更新界面

<!DOCTYPE html>
<html>
	<head>
		<title>$watch服务</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope){
				// $watch持续监听变量变化
				$scope.$watch("name", function(newVal, oldVal){
					$scope.dd = "新值：" + newVal + " 旧值：" + oldVal;
				});
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		<input type="text" ng-model="name"/>
		{{dd}}
	</body>
</html>

⦁ 4.4 $http服务

我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http服务来实现。

⦁ 4.4.1 $http()发送请求

语法格式：

$http({
	method : 'get|post', // 请求方式
	url : '', // 请求URL
	params : {'name':'admin'} // 请求参数
}).then(function(response){ // 请求成功
	// response: 响应对象封装了响应数据、状态码
},function(response){ // 请求失败
	// response:  响应对象封装了响应状态码
});

发送异步请求：

<!DOCTYPE html>
<html>
	<head>
		<title>$http</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope, $http){
				// 发送异步请求
				$scope.httpGet = function(){
					$http({
						method : "GET", // 请求方式
						url : "/city", // 请求URL
						params : {"id":10} // 请求参数
					}).then(function(response){ // 请求成功
						// response响应对象
						$scope.cities = response.data;
					},function(response){ // 请求失败
						alert("数据加载失败！");
					});
				};
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController" 
		  ng-init="httpGet();">
		<select ng-model="city" ng-options="city.name for city in cities">
			<option value="">==请选择城市==</option>
		</select>
		{{city.id}} {{city.name}}
	</body>
</html>

TestController控制器：

@RestController
public class TestController {
	
	/** 处理get请求与post请求 */
	@RequestMapping("/city")
	public List<Map<String,String>> getCitys(@RequestParam("id")Long id){
		System.out.println("请求参数id: " + id);
		List<Map<String,String>> data = new ArrayList<>();
		Map<String,String> city1 = new HashMap<>();
		city1.put("id", "1");
		city1.put("name", "广州市");
		Map<String,String> city2 = new HashMap<>();
		city2.put("id", "2");
		city2.put("name", "深圳市");
		Map<String,String> city3 = new HashMap<>();
		city3.put("id", "3");
		city3.put("name", "惠州市");
		data.add(city1);
		data.add(city2);
		data.add(city3);
		return data;
	}
}

效果如下：

说明：再把异步请求方式改成post请求测试，效果完全一样。

⦁ 4.4.2 $http.get()发送请求

语法格式：

// 第一种格式
$http.get(URL,{  
    params: {  
       "id":id  
    }  
}).then(function(response){// 请求成功
	// response: 响应对象封装了响应数据、状态码
}, function(response){ // 请求失败
	// response: 响应对象封装了响应状态码
});

// 第二种格式
$http.get(URL).then(function(response){ // 请求成功
	// response: 响应对象封装了响应数据、状态码
},function(response){ // 请求失败
	// response: 响应对象封装了响应状态码
});

// 第三种方式
$http.get(URL) // 请求URL
.success(function(data){ // 请求成功
	  // data: 服务器端响应数据
});

发送get请求：

<!DOCTYPE html>
<html>
	<head>
		<title>$http.get()请求</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope, $http){
				// 发送异步请求
				$scope.sendGet = function(){
					$http.get("/data.json").then(
						function(response){ // 请求成功
							// response响应对象，封装了响应数据、状态码等
							$scope.list = response.data;
						},function(response){ // 请求失败
							alert("数据加载失败！");
						}
					);
				};
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController" 
		  ng-init="sendGet()">
		<table border="1">
	        <tr>
	            <td>姓名</td>
	            <td>性别</td>
	            <td>年龄</td>
	        </tr>
	        <tr ng-repeat="user in list">
	            <td>{{user.name}}</td>
	            <td>{{user.sex}}</td>
	            <td>{{user.age}}</td>
	        </tr>
	    </table>
	</body>
</html>

建立文件 data.json：

[{"name" : "李大华", "sex" : "男", "age" : 30},
 {"name" : "李中华", "sex" : "女", "age" : 26},
 {"name" : "李小华", "sex" : "男", "age" : 20}]

⦁ 4.4.3 $http.post()发送请求

语法格式：

// 第一种方式
$http.post(URL,{  
    "id" : id  
}).then(function(response){ // 请求成功
	// response: 响应对象封装了响应数据、状态码
},function(response){ // 请求失败
	// response: 响应对象封装了响应状态码
});

// 第二种方式
$http.post(URL, // 请求URL
	{"key" : "value"} // 请求参数
).success(function(data){ // 请求成功
	// data: 服务器端响应数据
});

发送异步请求：

<!DOCTYPE html>
<html>
	<head>
		<title>$http.post()请求</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			/** 定义模块 */
			var myApp = angular.module("myApp",[]);
			/** 模块中添加控制器 */
			myApp.controller("myController", function($scope, $http){
				// 发送异步请求
				$scope.sendPost = function(){
					$http.post("/user", {"name" : "张三"}).then(
						function(response){ // 请求成功
							// response响应对象，封装了响应数据、状态码等
							$scope.res = response.data;
						},function(response){ // 请求失败
							alert("数据加载失败！");
						}
					);
				};
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController" 
		  ng-init="sendPost()">
		{{res}}
	</body>
</html>

TestController.java控制器：

/** post请求 */
@PostMapping("/user")
public String user(@RequestBody Map<String,String> map){
	System.out.println("请求参数name: " + map.get("name"));
	return map.get("name") + ", 您好！";
}

⦁ 前端分层

⦁ 基础层

提供base.js：

/** 定义基础模块 */
var app = angular.module("app",[]);

⦁ 服务层

提供js/service/cityService.js：

/** 定义城市服务层 */
app.service("cityService", function($http){
	/** 定义获取城市方法 */
	this.getCities = function(params){
		return $http({
			method : "get", // 请求方式
			url : "/city", // 请求URL
			params : params // 请求参数
		});
	};
});

⦁ 控制层

提供js/controller/cityController.js：

/** 定义城市控制器层 */
app.controller("cityController", function($scope, cityService){
	/** 定义查询所有城市方法 */
	$scope.findAll = function(){
		/** 调用服务层方法查询 */
		cityService.getCities({"id" : 100})
			.then(function(response){
				$scope.cities = response.data;
			},function(){
				alert("数据加载失败！");
			});
	};
});

⦁ 视图层

<!DOCTYPE html>
<html>
	<head>
		<title>mvc分层</title>
		<meta charset="UTF-8"/>
		<meta http-equiv="pragma" content="no-cache"/>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript" src="js/base.js"></script>
		<script type="text/javascript" 
src="js/service/cityService.js"></script>
		<script type="text/javascript" 
src="js/controller/cityController.js"></script>
	</head>
	<body ng-app="app" ng-controller="cityController" 
		  ng-init="findAll();">
		<select ng-model="city" ng-options="city.name for city in cities">
			<option value="">==请选择城市==</option>
		</select>
		{{city.id}} {{city.name}}
	</body>
</html>

分层后效果图：

mojingqiao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端框架AngularJS

⦁ 1.前端框架⦁ 1.1 AngularJS简介 AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。 ⦁ 1.2 AngularJS四大特征⦁ 1.2.1 MVC 模式Angul...
复制链接

扫一扫