AngularJs的简单使用

最新推荐文章于 2021-03-17 18:16:14 发布

sinei克

最新推荐文章于 2021-03-17 18:16:14 发布

阅读量1.5k

点赞数

分类专栏： java 文章标签： java 前端框架 AngularJs javascript

本文链接：https://blog.csdn.net/caiyibing1992/article/details/82154701

版权

java 专栏收录该内容

24 篇文章 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>
	<!--ng-app指定angular的作用域-->
	<body ng-app>
		<div>
			<!--模型的作用-->
			<input type="text" name="name" ng-model="name" />
		</div>
		<div>
			HELLO,{{name}}<!--等价于ng-bind用于视图显示-->
		</div>
	</body>
</html>

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

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

<body>
		<!-- ng-app="myapp" 定义了一个模块 -->
		<div ng-app="myapp" ng-controller="myctrl">
			<div>
				<!-- ng-model模型作用  -->
				<input type="text" name="name" ng-model="name" />
			</div>
			<div>
				<!-- {{}} 等价于 ng-bind 用于数据显示 -->
				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>

页面加载后：
这里写图片描述
修改输入框值后：

我们可以使用域对象对属性进行初始化赋值，当我们修改时，模型数据也会一起修改；
Controller 控制器是 js 代码
Model 模型是 name 属性
View 视图是 {{name }}

demo3:AngularJS 事件绑定

<body>
		<!-- ng-app="myapp" 定义了一个模块 -->
		<div ng-app="myapp" ng-controller="myctrl">
			<div>
				<!-- ng-model模型作用  -->
				<input type="text" name="name" ng-model="name" />
				
				<!-- 提供按钮 --> 
				<input type="button" value="清空" ng-click="clearVal()" />
			</div>
			<div>
				<!-- {{}} 等价于 ng-bind 用于数据显示 -->
				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>

页面加载后：
这里写图片描述
点击清空按钮后：

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>

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

<script  type="text/javascript" src="js/angular-route.min.js"></script>

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>
		<!--显示不同页面的内容-->
		<!--ng-view显示路由调用的页面-->
		<div ng-view></div>
		<div>
			<h1>footer</h1>
		</div>
	</body>

2.编写 Angular 路由配置 routeProvider

<script type="text/javascript">
		var myapp = angular.module("myapp",["ngRoute"]);
		myapp.config(function($routeProvider) {
			//设置路由页面
			$routeProvider
			.when("/", {
				 templateUrl: '5_1.html'
			 }).when("/users", {
				 templateUrl: '5_2.html'
			 }).when("/products", {
				 templateUrl: '5_3.html'
			 }).otherwise({
			 	redirectTo: '/'
			 });
		});
	</script>

这样,我们就可以实现点击首页，用户管理或者商品管理，ng_view中的内容随之改变，而header和footer内容不变；
demo6:AngularHttp编程：
Angular文档中对此是这么描述的：
这里写图片描述
比如我要往后台传递一个参数"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请求有点像

sinei克

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJs的简单使用

嗯额，刚刚上手了AngularJs,感觉功能很强大，做一个简单的入门笔记吧，新鲜出炉的,嘿嘿。首先我们要了解下什么是AngularJs:AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 ...
复制链接

扫一扫