一.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>