AngularJs

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

AngularJs的模块

ng-app模块指明这个是一个AngularJs程序段,若无说明则不能渲染.ng-model把输入框的值绑定到一个变量(双向绑定).ng-bind把变量绑定到某个段落的Inerthtml.

AngularJs表达式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	AngularJs小demo</title>
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>
<body ng-app>  <!-- 必须要注明ng-app否则不渲染 -->
	{{100+100}}
</body>
</html>

AngularJs双向绑定

所谓双向绑定，其实就是把一个输入框的内容和一个变量绑定在一起，输入框的内容变化，变量也相应变化，变量变化，输入框的内容也变化。这个过程由框架完成。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	AngularJs小demo</title>
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>
<body ng-app>
	请输入姓名:<input type="" name=""  ng-model="name">   <!-- 绑定变量 -->
	<!-- 再显示该变量 -->
	{{name}}
</body>
</html>

AngularJs初始化指令

我们可以提前把变量先初始化一个值。用ng-init=“变量=‘value’”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app ng-init="name='陈大海'">
	请输入您的名字:<input type="text" ng-model="name">
	{{name}}
</body>
</html>

AngularJs控制器

有时候表达式不那么清楚的表达，或者是有一些逻辑不那么清楚表达，这个时候我们就可以定义自己的模块，来解决一些问题。具体看代码有注释

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	AngularJs小demo</title>
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<script>
		//建立自己的模块,ng也是一个模块
		//myapp是自己定义模块的名字
		var app = angular.module("myapp",[]);
		//定义控制器
		//两个参数,名字和功能
		//$scope控制层与视图层交换数据的桥梁
		//mycontroller是自己定义的控制器的名字
		app.controller("mycontroller",function($scope){ 
			//给scope类添加方法
			$scope.add=function(){
				//必须要添加$scope获取x,y
				return parseInt($scope.x) + parseInt($scope.y); //parseInt转化成int 类型
			}
		});
	</script>
</head>
<!-- ng-app="自己定义的模块"，ng-controller="自己定义的控制器" -->
<body ng-app="myapp" ng-controller="mycontroller">
	第一个数:<input type="" name="" ng-model="x">
	第二个数:<input type="" name="" ng-model="y">
	<!-- 视图层直接用就行了,没必要再加$scope.add()了直接add()则可 -->

	{{add()}}
</body>
</html>

循环数组

这个很简单就是可以通过循环获取数组中的value

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	AngularJs小demo</title>
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<script>
		var app = angular.module("myApp",[]);
		app.controller("myController",function($scope){
			$scope.list=[102,203,394,555];
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController">
	<table>
		<tr ng-repeat="x in list">
			<td>{{x}}</td>
		</tr>
	</table>
</body>
</html>

AngularJs循环对象数组

再控制器中，可以定义一个列表，然后可以在视图中用循环展示出来。这个很简单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	AngularJs小demo</title>
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<script>
		var app = angular.module("myApp",[]);
		app.controller("myController",function($scope){
			$scope.list=[
				{name:'张三',math:100,yuwen:100},
				{name:'李四',math:190,yuwen:123},
				{name:'王五',math:100,yuwen:123},
			];
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController">
	<table>
		<tr>
			<td>姓名</td>
			<td>数学</td>
			<td>语文</td>
		</tr>
		<tr ng-repeat="x in list">
			<td>{{x.name}}</td>
			<td>{{x.math}}</td>
			<td>{{x.yuwen}}</td>
		</tr>
	</table>
</body>
</html>

AngularJs内置对象

$http是AngularJs常用的一个内置对象，用来发送http请求从后台获取Json数据，这段代码必须在Tomcat服务器上运行才行。data.json用来返回json数据。
data.json代码如下:

[{
		"name": "张三",
		"math": 100,
		"yuwen": 100
	},
	{
		"name": "李四",
		"math": 190,
		"yuwen": 123
	},
	{
		"name": "王五",
		"math": 100,
		"yuwen": 123
	}
]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJs 内置服务$http</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
		var app = angular.module("myApp",[]);
		//因为要使用$http对象 所以必须依赖注入
		//get是http对象中的一个类，success是get类的一个方法,
		//sucess方法的参数是一个函数，response是请求的返回值,然后定义一个列表等于response.
		app.controller("myController",function($scope,$http){
			$scope.findList=function(){
				$http.get("data.json").success(
					function(response){
						$scope.list=response;
					}
				)
			}
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
	<table>
		<tr>
			<td>姓名</td>
			<td>数学</td>
			<td>语文</td>
		</tr>
		<tr ng-repeat="entity in list">
			<td>{{entity.name}}</td>
			<td>{{entity.math}}</td>
			<td>{{entity.yuwen}}</td>
		</tr>
	</table>
</body>
</html>

总结

这些都是AngularJs 的最基础常用方法。AngularJs可以用来实现前后端分离。

AngularJs 基础学习笔记

目录