AngularJS总结

WildKingxue

于 2021-09-22 11:37:50 发布

阅读量293

点赞数

分类专栏： Angular 文章标签： html5 html javascript angular.js

本文链接：https://blog.csdn.net/WildKingxue/article/details/120410537

版权

Angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.AngularJS 简介

1.AngularJS介绍

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。

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

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

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

2.什么是 AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

二.AngularJS 在HTML中

AngularJS 通过 ng-directives 扩展了 HTML。

1.ng-app

指令定义一个 AngularJS 应用程序。

2.ng-model

指令把元素值（比如输入域的值）绑定到应用程序。

3.{{ }}

在html文件中显示变量值/表达式运算结果

4.ng-bind

指令把应用程序数据绑定到 HTML 视图。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
	</head>
	<!-- 
	ng-app-----定义一个 AngularJS 应用程序
	ng-model----将AngularJS 应用程序中的变量与当前文本框绑定
	{{}}-----在html文件中显示变量值/表达式运算结果
	ng-bind------应用程序数据绑定到 HTML元素
	 -->
	<body ng-app="">
		<input type="text" ng-model="text"/>
		<h1>你好  {{text}}</h1>
		<p ng-bind="text"></p>
	</body>
</html>

5.ng-init

指令初始化 AngularJS 应用程序变量。

数字型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
	</head>
	<!-- 数字 -->
	<body ng-app="" ng-init="a=5;b=10">
		<p>a={{a}},b={{b}}</p>
		<p>a+b={{a+b}}</p>
		<p>a*b={{a*b}}</p>
		<p>a/b={{a/b}}</p>
		<p>a-b={{a-b}}</p>
	</body>
</html>

字符串型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
	</head>
	<!-- 字符串 -->
	<body ng-app="" ng-init="name='yatou';">
		<p>我喜欢你，{{name}}。</p>
	</body>
</html>

对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
	</head>
	<!-- 对象 -->
	<body ng-app="" ng-init="name={one:'zhangsan',two:'lisi',three:'wangwu',four:'xiaoer'};">
		<p>{{name.one}}:大家好！我叫{{name.one}}。</p>
		<p>{{name.two}}:大家好！我叫{{name.two}}。</p>
		<p>{{name.three}}:大家好！我叫{{name.three}}。</p>
		<p>{{name.four}}:大家好！我叫{{name.four}}。</p>
	</body>
</html>

数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
	</head>
	<!-- 数组 -->
	<body ng-app="" ng-init="name=['zhangsan','lisisi','wangwu']">
		<p>{{name[0]}}是本校的三好学生！</p>
		<p>{{name[1]}}是本校的校花！</p>
		<p>{{name[2]}}是本校的校草！</p>
	</body>
</html>

6.ng-repeat

指令会重复一个 HTML 元素

指令用在一个对象数组上

数组

<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
	</head>
	<!-- 数组 -->
	<body ng-app="" ng-init="mynames=['zhangsan','lisi','wangwu'];">
		<!-- 无序列表 -->
		<ul>
			<li ng-repeat="name in mynames">{{name}}</li>
		</ul>
	</body>
</html>

数组对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
	</head>
	<!-- 数组对象 -->
	<body ng-app="" ng-init="studentlist=[
	    {stuid:1001,stuname:'zhangsan',stuage:22},
	    {stuid:1002,stuname:'lisisi',stuage:18},
	    {stuid:1003,stuname:'wangwu',stuage:20}];">
	        <table border="1px" cellpadding="0" cellspacing="0px" width="200px">
	            <tr ng-repeat="student in studentlist">
	                <td>{{student.stuid}}</td>
	                <td>{{student.stuname}}</td>
	                <td>{{student.stuage}}</td>
	            </tr>
	        </table>
	    </body>
</html>

三.AngularJS 模块与控制器

AngularJS 模块

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

格式：var 创建的名字= angular.module("参数", []);

参数对应执行应用的 HTML 元素【是ng-app中的参数】

AngularJS 控制器

使用 ng-controller 指令来添加应用的控制器

格式：创建的名字.controller("参数", function() { }）

参数【是ng-controller中的参数】

数组对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			//创建模板
			var app = angular.module("myApp", []);
			//创建控制器
			app.controller("text", function($scope) {
				//数组对象
				$scope.studentlist = [{
						stuid: 1001,
						stuname: 'zhangsan',
						stuage: 22
					},
					{
						stuid: 1002,
						stuname: 'lisisi',
						stuage: 18
					},
					{
						stuid: 1003,
						stuname: 'wangwu',
						stuage: 20
					}
				];
			})
		</script>
	</head>
	<body ng-app="myApp" ng-controller="text">
	    <table border=" 1px" cellpadding="0" cellspacing="0px" width="200px">
			<tr ng-repeat="student in studentlist">
				<td>{{student.stuid}}</td>
				<td>{{student.stuname}}</td>
				<td>{{student.stuage}}</td>
			</tr>
		</table>
	</body>
</html>

数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			//创建模板
			var app = angular.module("myApp", []);
			//创建控制器
			app.controller("text", function($scope) {
				//数字型
				$scope.a=120;
				$scope.b=10
			})
		</script>
	</head>
	<body ng-app="myApp" ng-controller="text">
	    <p>a+b={{a+b}}</p>
	    <p>a*b={{a*b/10}}</p>
	    <p>a/b={{a/b}}</p>
	    <p>a-b={{a-b}}</p>
	</body>
</html>

数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			//创建模板
			var app = angular.module("myApp", []);
			//创建控制器
			app.controller("text", function($scope) {
				//数组类型
				$scope.name=["zhangsan","lisisi","wangwu"]
			})
		</script>
	</head>
	<body ng-app="myApp" ng-controller="text">
		<p>得到第一个的名字：{{name[0]}}</p>
		<p>得到第二个的名字：{{name[1]}}</p>
		<p>得到第三个的名字：{{name[2]}}</p>
	</body>
</html>

字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			//创建模板
			var app = angular.module("myApp", []);
			//创建控制器
			app.controller("text", function($scope) {
				//字符串类型
				$scope.src="Hello WangXing";
			})
		</script>
	</head>
	<body ng-app="myApp" ng-controller="text">
	    <p>{{src}},我很庆幸来到这里！</p>
	</body>
</html>

对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			//创建模板
			 var app=angular.module('myApp', []);
			 //创建控制器
			 app.controller("shao",function($scope){
				 //对象类型
				 $scope.obj={
					name1:'xiaozhi',
					name2:'xiaoshao',
					name3:'luochen'
				 }
			 })
		</script>
	</head>
	<body ng-app="myApp" ng-controller="shao">
		<p>一号床位的叫{{obj.name1}}</p>
		<p>一号床位的叫{{obj.name2}}</p>
		<p>一号床位的叫{{obj.name3}}</p>
	</body>
</html>

四.Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

基本都会使用到

五.服务(Service)

1.$location服务

$location 服务，它可以返回当前页面的 URL 地址。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			//创建模板
			var app=angular.module("shao",[]);
			//创建控制器
			//$location 服务，它可以返回当前页面的 URL 地址。
			app.controller("text",function($scope,$location){
				$scope.apple=function(){
					//当前页面的 url 地址
					alert($location.absUrl());//http://127.0.0.1:8848/20210917AngularJS/15.html
				}
			})
		</script>
	</head>
	<body ng-app="shao" ng-controller="text">
		<!-- 使用点击按钮得到路径 -->
		<input type="button" value="按钮" ng-click="apple()"/>
	</body>
</html>

2.$http服务

访问后台才能得到数据。

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			//创建模板
			var apple=angular.module("shao",[]);
			//创建控制器
			apple.controller("text",function($scope,$http){
				//点击事件
				$scope.trtd=function(){
					//得到后台的数据值
					$http.post("http://localhost:8080/test").then(function (resp) {
						//alert(response);
					      $scope.stulist = resp.data;
					});
				}
			})
		</script>
	</head>
	<body ng-app="shao" ng-controller="text">
		<input type="button" value="按钮" ng-click="trtd()"/>
		<table border="1px" cellspacing="0" cellpadding="0" width="300px">
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>地址</td>
			</tr>
			<tr ng-repeat="stu in stulist">
				<td>{{stu.stuid}}</td>
				<td>{{stu.stuname}}</td>
				<td>{{stu.stuage}}</td>
				<td>{{stu.stuaddress}}</td>
			</tr>
		</table>
	</body>
</html>

3.$timeout服务

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			//创建模板
			var app=angular.module("shao",[]);
			//创建控制器
			app.controller("text",function($scope,$timeout){
				//字符串
				$scope.love="我喜欢你！";
				//点击事件
				$scope.get=function(){
					//$timeout多长时间执行一次【只执行一次】
					$timeout(function(){
						//执行后的结果
						$scope.love="l love you !";
					},3000)
				}
			})
		</script>
	</head>
	<body ng-app="shao" ng-controller="text">
		<input type="button" value="三秒后换值" ng-click="get()"/>
		<p>{{love}}</p>
	</body>
</html>

4.$interval服务

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AngularJS</title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			//创建模板
			var app = angular.module("shao", []);
			//创建控制器
			app.controller("text", function($scope, $interval) {
			//得到现在的时间
			$scope.theTime = new Date().toLocaleTimeString();
			$scope.get = function() {
				$interval(function() {
					$scope.theTime = new Date().toLocaleTimeString();
				}, 1000);
			}
			})
		</script>
	</head>
	<body ng-app="shao" ng-controller="text">
		<input type="button" value="时间" ng-click="get()" />
		<p>{{theTime}}</p>
	</body>
</html>

5.创建自定义服务

创建名为hexafy 的服务:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

在controller中使用自定义服务

app.controller('myCtrl', function($scope, hexafy) {

  $scope.hex = hexafy.myFunc(255);

});

六.Select(选择框)

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>angular</title>
		<script src="js/angular.min.js"></script>
		<script type="text/javascript">
			//创建模板
			var app = angular.module("shao", []);
			//创建自定义服务
			app.service("apple", function($http) {
				this.yatou = function() {
					return $http.post("http://localhost:8080/test");
				}
			})
			//创建控制器
			app.controller("text", function($scope, apple) {
				$scope.selectedstuname="";
				$scope.myname=[];
				$scope.testhttp = function() {
					apple.yatou().then(function(resp) {
						$scope.stulist = resp.data;
						for (var i = 0; i < $scope.stulist.length; i++) {
							var stu = $scope.stulist[i];
							$scope.myname.push(stu.stuname);
						}
					});
				}
			})
		</script>
	</head>
	<body ng-app="shao" ng-controller="text">
		<input type="button" value="按钮{{name}}" ng-click="testhttp()"/>
		<select ng-init="selectedstuname = myname[0]" ng-model="selectedstuname" ng-options="x for x in myname"></select>
	</body>
</html>