版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/l1336037686/article/details/81214584
菜鸟教程 http://www.runoob.com/angularjs/angularjs-intro.html
官网文档 https://docs.angularjs.org/api
一 AngularJS简介
各个 angular.js 版本下载： https://github.com/angular/angular.js/releases
二 AngularJS表达式
AngularJS 表达式写在双大括号内：{{ expression }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表达式</title>
<script src="static/angular.min.js"></script>
</head>
<body ng-app>
{{100 + 200}}
<button></button>
</body>
</html>
三 Angular JS数据绑定
使用ng-model进行数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定</title>
<script src="static/angular.min.js"></script>
</head>
<body ng-app>
<input type="text" ng-model="name">
{{name}}
</body>
</html>
四 AngularJS指令
使用ng-init进行初始化操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始化指令</title>
<script src="static/angular.min.js"></script>
</head>
<body ng-app ng-init="name='zhangsan'">
<input type="text" ng-model="name">{{name}}
</body>
</html>
五 Angular JS 控制器
使用ng-controller 指令定义了应用程序控制器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制器</title>
<script src="static/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myController",function ($scope) {
$scope.input=function () {
return $scope.name + "| Hello World |"
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="name">
{{input()}}
</body>
</html>
六 AngularJS 事件
使用ng-click代表点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<script src="static/angular.min.js"></script>
<script>
var app = angular.module("myApp",[])
app.controller("myController",function ($scope,$http) {
$scope.show=function(){
$scope.showMsg="Hello AngularJS"
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<button ng-click="show()">显示</button>
{{showMsg}}
</body>
</html>
七 AngularJS 循环指令
在需要循环的元素上使用 ng-repeat=“a in Arrays” 进行循环
简单循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环指令</title>
<script src="static/angular.min.js"></script>
<script>
var app = angular.module("myApp",[])
app.controller("myController",function ($scope,$http) {
$scope.show=function(){
$scope.showMsg=[1,2,3,4,5,6];
}
$scope.list = [1,2,3,4,5,6,7,8,9]
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<button ng-click="show()">显示</button>
<!--<table>-->
<!--<tr ng-repeat="x in showMsg">-->
<!--<td>{{x}}</td>-->
<!--</tr>-->
<!--</table>-->
<div ng-repeat="x in showMsg">
<p>{{x}}</p>
</div>
</body>
</html>
循环对象数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环对象数组</title>
<script src="static/angular.min.js"></script>
<script>
var app = angular.module("myApp",[])
app.controller("myController",function ($scope,$http) {
$scope.show=function(){
$scope.showMsg=[
{name:'张三',study:100},
{name:'李四',study:88},
{name:'王五',study:77}
];
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<button ng-click="show()">显示</button>
<!--<table>-->
<!--<tr ng-repeat="x in showMsg">-->
<!--<td>{{x}}</td>-->
<!--</tr>-->
<!--</table>-->
<div ng-repeat="entity in showMsg">
<p>{{entity.name}} + {{entity.study}}</p>
</div>
</body>
</html>
八 AngularJS 内置服务
$http
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据
基本写法
// 简单的 GET 请求，可以改为 POST
// 简单的 GET 请求，可以改为 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
可以根据请求方式简写为：
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置服务</title>
<script src="static/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myController",function ($scope,$http) {
$http.get("./static/demo.json").success(function (response) {
$scope.msg = response;
})
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
{{msg}}
</body>
</html>
九 AngularJS 过滤器
作用: 在显示数据时可以对数据进行格式化或过滤
AngularJS 过滤器可用于转换数据，不会改变原本的数据：{{express | 过滤器名：补充说明}}
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
| date | 将日期对象格式化(文本) |
| number | 数值格式化(文本) |
| json | 将js对象格式化为json(文本) |
例子：
将字母转换为大写
<body ng-app>
{{"hello world" | uppercase}}
</body>
自定义过滤器
例子：反转字符串
app.filter('reverse', function() {
return function(text) {
return text.split("").reverse().join("");
}
});
例子：翻译HTML语言
/*$sce服务写成过滤器*/
app.filter('trustHtml',['$sce',function($sce){
return function(data){
return $sce.trustAsHtml(data);
}
}]);
十 AngularJS MVC分层开发
AngularJS的有一个便利之处在于可以像后端一样进行分层开发，划分为Controller层，Service层，View层
例子：获取后端提供的json信息并打印
代码：
前端代码：
base.js
var app = angular.module('myApp', []);
myService.js
//服务层
app.service('myService', function($http) {
this.getUsers = function () {
return $http.get("/admin/users");
}
});
myController.js
//控制层
app.controller('myController', function($scope, $http, myService) {
$scope.users = [];
$scope.getUsers = function () {
myService.getUsers().success(function (data) {
$scope.users = data;
})
}
});
页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="static/angular.min.js"></script>
<script type="text/javascript" src="static/base.js"></script>
<script src="static/service/myService.js"></script>
<script type="text/javascript" src="static/controller/myController.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="getUsers()">
<p ng-repeat="user in users">{{user}}</p>
</body>
</html>
后端代码：
/**
* 用于对CSDN AngularJS 1.x 博客提供后端支持
* @author LGX_TvT
* @date 2018-08-15 23:49
*/
@RestController
@RequestMapping("/admin")
public class AdminController {
/**
* 获取用户名单
* @return
*/
@GetMapping("/users")
public List<String> getUsers(){
List<String> list = new ArrayList<>();
list.add("zhangsan");
list.add("lisi");
list.add("wangwu");
return list;
}
}
结果：
十一 AngularJS 继承
AngularJS与其他继承一样，可以继承父类的属性与方法
格式：
$controller('baseController',{$scope:$scope});//继承baseController
十二 AngularJS Select
ng-options的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select</title>
<script src="static/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.list = ['Hello','World','This','AngularJS'];
})
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<select ng-model="selectedName" ng-options="x for x in list"></select>
</body>
</html>
十三 Angular JS 文件上传
案例代码：
uploadService.js
//文件上传服务
app.service("uploadService",function($http){
this.uploadFile=function(){
var formData=new FormData();
formData.append("file",file.files[0]);
return $http({
method:'POST',
url:"../upload/upload",
data: formData,
headers: {'Content-Type':undefined},
transformRequest: angular.identity
});
}
})
uploadController.js
/**
* 上传图片
*/
$scope.uploadFile=function(){
uploadService.uploadFile().success(function(response) {
if(response.success){//如果上传成功，取出url
$scope.image_entity.url=response.message;//设置文件地址
}else{
alert(response.message);
}
}).error(function() {
alert("上传发生错误");
});
};