AngularJs的简单使用

爱被打了一巴掌 2022-05-15 10:51 173阅读 0赞

嗯额，刚刚上手了AngularJs,感觉功能很强大，做一个简单的入门笔记吧，新鲜出炉的,嘿嘿。  
首先我们要了解下什么是AngularJs:

AngularJS 是一个 **JavaScript框架**。它是一个以 JavaScript 编写的库；  
它可通过script标签添加到HTML 页面。  
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。简单的说它就是一个前端框架：主要特点有以下：  
**MVVM、模块化、自动化双向数据绑定、依赖注入、内部指令、语义化标签** ；  
AngularJs的不同版本区别较大，企业中使用较多的是1版本，目前已更新到4  
我们通过几个小的demo来演示它的使用：  
***demo1：双向数据绑定：***

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>angularJs的事件绑定</title>
    		<script  type="text/javascript" src="js/angular.min.js"></script>
    	</head>
    	
    	<body ng-app>
    		<div>
    			
    			<input type="text" name="name" ng-model="name" />
    		</div>
    		<div>
    			HELLO,{
       {name}}
    		</div>
    	</body>
    </html>

首先简单介绍几个标签的作用：  
ng-app 在任何元素上使用，代表 angular 应用作用域  
ng-controller 指定控制器  
ng-model 指定模型  
ng-bind 或者 \{ \{属性名\}\} 进行属性取值 用于显示  
页面效果：  
![这里写图片描述][70]  
当我们输入值时：  
![这里写图片描述][70 1]

这里也就是双向数据绑定的效果：更新模型，视图会自动更新， 更新视图，模型会自动更新  
***demo2:基于模块化实现 MVC:***  
ps:在 AngularJS 的 1.3 Beta15 版本之前，可以定义全局控制器 <body ng-app ng-controller=”控制器方法名”> 在 AngularJS 的 1.3 Beta15 版本后，使用控制器，必须要指定模块 <body ng-app=”模块名” ng-controller=”控制器方法名”>

<body>
    		
    		<div ng-app="myapp" ng-controller="myctrl">
    			<div>
    				
    				<input type="text" name="name" ng-model="name" />
    			</div>
    			<div>
    				
    				Hello, {
       {name}}
    			</div>
    		</div>
    		
    		<script type="text/javascript">
    			// 初始化 myapp 模块 
    			var myapp = angular.module("myapp",[]);
    			
    			// 定义模块的控制器 
    			// 依赖注入 ，$scope作用域对象，操作当前作用域视图 
    			myapp.controller("myctrl", ["$scope", function($scope){
    				// 对模型进行初始化赋值 
    				$scope.name = "demo2";
    			}]);
    		</script>
    	</body>

页面加载后：  
![这里写图片描述][70 2]  
修改输入框值后：  
![这里写图片描述][70 3]  
我们可以使用域对象对属性进行初始化赋值，当我们修改时，模型数据也会一起修改；  
Controller 控制器 是 js 代码  
Model 模型 是 name 属性  
View 视图 是 \{ \{name \}\}

***demo3:AngularJS 事件绑定***

<body>
    		
    		<div ng-app="myapp" ng-controller="myctrl">
    			<div>
    				
    				<input type="text" name="name" ng-model="name" />
    				
    				 
    				<input type="button" value="清空" ng-click="clearVal()" />
    			</div>
    			<div>
    				
    				Hello, {
       {name}}
    			</div>
    		</div>
    		
    		<script type="text/javascript">
    			// 初始化 myapp 模块 
    			var myapp = angular.module("myapp",[]);
    			
    			// 定义模块的控制器 
    			// 依赖注入 ，$scope作用域对象，操作当前作用域视图 
    			myapp.controller("myctrl", ["$scope", function($scope){
    				// 对模型进行初始化赋值 
    				$scope.name = "demo3";
    				
    				// 在作用域 提供 clearVal 点击事件 
    				$scope.clearVal = function(){
    					$scope.name = "" ; // 模型设置为空 
    				}
    			}]);
    		</script>
    	</body>

页面加载后：  
![这里写图片描述][70 4]  
点击清空按钮后：  
![这里写图片描述][70 5]

***demo4:集合数据遍历显示***

<body ng-app="myapp" ng-controller="myctrl">
    		<table width="100%" border="1">
    			<tr>
    				<th>序号</th>
    				<th>商品编号</th>
    				<th>商品名称</th>
    				<th>价格</th>
    			</tr>
    			<tr ng-repeat="product in products">
    				<td>{
       {$index+1}}</td>
    				<td>{
       {product.id}}</td>
    				<td>{
       {product.name}}</td>
    				<td>{
       {product.price}}</td>
    			</tr>
    		</table>
    	</body>
    	
    	<script type="text/javascript">
    		var myapp = angular.module("myapp",[]);
    		myapp.controller("myctrl",["$scope",function($scope){
    			$scope.products = [
    				{
    					id : 1001,
    					name : '数码相机',
    					price : 3000
    				},
    				{
    					id : 1002,
    					name : '苹果手机',
    					price : 7000
    				}
    			];
    		}])
    	</script>

页面加载后：  
![这里写图片描述][70 6]  
***demo5:AngularJS 路由使用（页面架构 ）***  
使用AngularJs路由功能时需要导入jar包：

1.编写页面布局， 将 AngularJS 加载变化部分 div，指定 ng-view

<body ng-app="myapp">
    		<div>
    			<h1>header</h1>
    			<ul>
    				<li><a href="#/">首页</a></li>
    				<li><a href="#/users">用户管理</a></li>
    				<li><a href="#/products">商品管理</a></li>
    			</ul>
    		</div>
    		
    		
    		<div ng-view></div>
    		<div>
    			<h1>footer</h1>
    		</div>
    	</body>

2.编写 Angular 路由配置 routeProvider

这样,我们就可以实现点击首页，用户管理或者商品管理，ng\_view中的内容随之改变，而header和footer内容不变；  
***demo6:AngularHttp编程：***  
Angular文档中对此是这么描述的：  
![这里写图片描述][70 7]  
比如我要往后台传递一个参数"telephone",action路径为customer\_sendSms；我们使用AngularJs编程可以这么写：

// 1 发送一个HTTP请求，通知服务器 发送短信给目标用户 
    					var regex = /^1(3|5|7|8)\d{9}$/;
    					if(regex.test(telephone)) {
    						// 校验通过
    						$http({
    							method: 'GET',
    							url: 'customer_sendSms.action',
    							params : {
    								"telephone" : telephone
    							}
    						}).error(function(data, status, headers, config) {
    							// 当响应以错误状态返回时调用
    							alert("发送短信出错，请重试");
    						});
    					} else {
    						// 校验失败 
    						alert("手机号非法，请重新输入 ");
    						return;
    					}

当然，这里我们也可以设置发送成功的状态，其实跟我们之前学习的ajax请求有点像

[70]: /images/20220515/ab41ab67bf1242f185d3c69acd94e93d.png
[70 1]: /images/20220515/1bedea9262b340c6b4c84a929d07cbc5.png
[70 2]: /images/20220515/712577becebd4f24b36a1fbfad53572f.png
[70 3]: /images/20220515/1c29296bfe59414c915284a3ee5b634e.png
[70 4]: /images/20220515/759929bd7c3e4dc4a48641445f256900.png
[70 5]: /images/20220515/a7a2770a521f43069bd27ba3a60c8814.png
[70 6]: /images/20220515/d079ebbef78b4755966ba14ffe0fe3b4.png
[70 7]: /images/20220515/728a32d8093946dc8764c09e9002a36d.png