AngularJS入门
AngularJS入门
引入AngularJS文件
我们在使用AngularJS之前，需要先引入AngularJS的文件
<script src="../js/angular.min.js"></script>
启动引擎
ng-app命令：启动引擎
在引入AngularJS文件后，其并不会直接生效，我们需要在使用AngularJS的页面中，使用ng-app命令来加载引擎。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS-Demo1</title>
<script src="../js/angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
此时，html中{{}}中的内容就会被计算，否则输出的仍是常量。
AngularJS的{
在前端页面中如果正确引用了AngularJS文件，也启动了引擎，那么在{{}}中就可以输出AngularJS的变量值。
ng-model：双向绑定
在AngularJS中可以在标签中加入ng-model属性，用于绑定标签的值，这个变量的值在angularJS的全局作用域中只要发生了改变，这个标签的值也会发生相应的改变。标签的值发生了改变，那么这个变量也会随之改变，这就是双向绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS-demo2</title>
<script src="../js/angular.min.js"></script>
</head>
<body ng-app>
请输入姓名:<input ng-model="name">
我也是姓名:<input ng-model="name">
{{name}}
</body>
</html>
ng-init初始化
在angular中ng-init指令用于初始化，即加载页面就执行的内容，一般配合方法使用，这里展示一个ng-init的实例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS-demo2</title>
<script src="../js/angular.min.js"></script>
</head>
<body ng-app ng-init="name='jack'">
请输入姓名:<input ng-model="name">
我也是姓名:<input ng-model="name">
{{name}}
</body>
</html>
ng-app：建立模块
var app = angular.mudule("模块名",[]);
上述代码创建一个angularJS的模块，模块中我们可以写自己的实现代码，有了模块才能进一步的书写代码。
ng-controller ：创建控制器
此命令用于创建控制器，控制器中我们可以书写js代码，创建方法、声明变量。等一系列的操作。
创建控制器的时候需要传入两个参数
参数1：控制器名称
参数2：方法体
<script>
//建立模块
var app = angular.module("myApp",[]);
//创建控制器
app.controller("myController",function ($scope) {
});
</script>
使用控制器需要在前端页面的body标签中引入模块和控制器
<body ng-app="myApp" ng-controller="myController"></body>
ng-click：事件指令
在angularJS中同样提供了一系列的事件操作的指令，其中最常用的一个当属ng-click指令。
用法：在标签中加入ng-click指令，即可绑定单击事件，事件需要在ng-click中通过$scope声明。
案例：计算两个数的和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularJS-demo4-控制器</title>
<script src="../js/angular.min.js"></script>
<script>
//建立模块
var app = angular.module("myApp",[]);
//创建控制器
app.controller("myController",function ($scope) {
//结果
$scope.result = 0;
//计算结果
$scope.getResult = function() {
$scope.result = parseInt($scope.num1)+ parseInt($scope.num2);
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
第一个数字：<input type="text" ng-model="num1">
第二个数字：<input type="text" ng-model="num2">
<button ng-click="getResult()">计算</button>
结果:{{result}}
</body>
</html>
注意：如果使用的是谷歌浏览器，AngularJS很容易出现缓存导致结果运行不出的情况，如果出现这种情况可以清空缓存再重试即可。
ng-repeat循环和迭代
在我们开发过程中，会进行大量的页面展示，其中会用到循环。angularJS提供了很方便的循环操作。它的用法类似于jsp中的c:foreach，接下来我们来通过一个案例介绍一下其用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo5-循环</title>
<script src="../js/angular.min.js"></script>
<script>
//创建模块
var app = angular.module("myApp",[]);
//创建控制器
app.controller("myController",function ($scope) {
//创建数组
$scope.list = [1,3,5,7,9];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
//迭代数组
<tr ng-repeat="item in list">
//展示数据
<td>{{item}}</td>
</tr>
</table>
</body>
</html>
使用$http发送http请求
在开发过程中，必然是要从后台查询数据的，angularJS为我们提供的解决方案就是$http。
首先，在controller中需要先引入$http.
然后就可以在controller中的方法中使用$http发送请求，获取数据。
<script src="../js/angular.min.js"></script>
<script>
//创建模块
var app = angular.module("myApp",[]);
//创建控制器
app.controller("myController",function ($scope,$http) {
//查询
$scope.findList = function () {
//TODO 此处存在跨域问题 暂未解决
$http.post("../json/data.json").success(function (response) {
$scope.list = response;
});
}
});
</script>
ng-init初始化
在页面加载的时候，我们经常会做一些查询操作，这个时候往往需要调用js方法，对于这种需求，AngularJS也为我们提供了对应的解决方案。
在body标签中加入ng-init="method()"，就会在页面加载到时候为我们执行method方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>$http</title>
<script src="../js/angular.min.js"></script>
<script>
//创建模块
var app = angular.module("myApp",[]);
//创建控制器
app.controller("myController",function ($scope,$http) {
//查询
$scope.findList = function () {
//TODO 此处存在跨域问题 暂未解决
$http.post("../json/data.json").success(function (response) {
$scope.list = response;
});
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>数学成绩</th>
</tr>
<tr ng-repeat="item in list">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.math}}</td>
</tr>
</table>
</body>
</html>
