AngularJS的常用属性:
ng-app:在任何元素上使用,代表angular应用作用域
ng-controller:指定控制器
ng-model:指定模型
ng-bind:进行属性取值,用于显示
双向数据绑定:
更新模型,视图会自动更新,更新视图,模型会自动更新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS双向数据绑定</title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<!-- ng-app是angular编程入口，是模块作用域 -->
<body ng-app>
<div>
<!-- ng-model模型作用 -->
<input type="text" name="name" ng-model="name" />
</div>
<div>
<!-- {{}} 等价于 ng-bind 用于数据显示 -->
Hello, {{name}}
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS基于模块化</title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<!-- ng-app="myapp" 定义了一个模块 -->
<div ng-app="myapp" ng-controller="myctrl">
<div>
<!-- ng-model模型作用 -->
<input type="text" name="name" ng-model="name" />
</div>
<div>
<!-- {{}} 等价于 ng-bind 用于数据显示 -->
Hello, {{name}}
</div>
</div>
<script type="text/javascript">
// 初始化 myapp 模块
var myapp = angular.module("myapp",[]);
// 定义模块的控制器
// 依赖注入 ，$scope作用域对象，操作当前作用域视图
myapp.controller("myctrl", ["$scope", function($scope){
// 对模型进行初始化赋值
$scope.name = "我爱JAVA";
}]);
</script>
</body>
</html>
Controller控制器 model模型 view视图
Angular事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS基于MVC复杂操作</title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<!-- ng-app="myapp" 定义了一个模块 -->
<div ng-app="myapp" ng-controller="myctrl">
<div>
<!-- ng-model模型作用 -->
<input type="text" name="name" ng-model="name" />
<!-- 提供按钮 -->
<input type="button" value="清空" ng-click="clearVal()" />
</div>
<div>
<!-- {{}} 等价于 ng-bind 用于数据显示 -->
Hello, {{name}}
</div>
</div>
<script type="text/javascript">
// 初始化 myapp 模块
var myapp = angular.module("myapp",[]);
// 定义模块的控制器
// 依赖注入 ，$scope作用域对象，操作当前作用域视图
myapp.controller("myctrl", ["$scope", function($scope){
// 对模型进行初始化赋值
$scope.name = "我爱JAVA";
// 在作用域 提供 clearVal 点击事件
$scope.clearVal = function(){
$scope.name = "" ; // 模型设置为空
}
}]);
</script>
</body>
</html>
AngularJS 集合数据遍历显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS集合数据遍历显示 </title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<table width="100%" border="1">
<tr>
<th>序号</th>
<th>商品编号</th>
<th>商品名称</th>
<th>价格</th>
</tr>
<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</body>
<script type="text/javascript">
var myapp = angular.module("myapp",[]);
myapp.controller("myctrl",["$scope",function($scope){
$scope.products = [
{
id : 1,
name : '索尼手机',
price : 3000
},
{
id : 2,
name : '三星手机',
price : 7000
}
];
}])
</script>
</html>
基于angularJS完成获取验证码,显示60秒倒计时的功能
导入应用模块和控制器
在最外层的div中加入应用模块和控制器
在发送验证码的标签上添加属性并绑定事件
发送短信的核心代码
<script type="text/javascript">
// 模块定义
var signupApp = angular.module("signupApp", []);
// 控制器定义
signupApp.controller("signupCtrl", ["$scope","$http",function($scope,$http) {
$scope.btnMsg = "发送验证码";
var active = true;
var second = 60; // 倒计时60秒
var secondInterval;
$scope.getCheckCode = function(telephone) {
if(active == false) {
return;
}
显示倒计时按钮，60秒后，允许重新发送
active = false;
secondInterval = setInterval(function() {
if(second < 0) {
// 倒计时结束，允许重新发送
$scope.btnMsg = "重发验证码";
// 强制更新视图
$scope.$digest();
active = true;
second = 60;
// 关闭定时器
clearInterval(secondInterval);
secondInterval = undefined;
} else {
// 继续计时
$scope.btnMsg = second + "秒后重发";
// 强制更新视图
$scope.$digest();
second--;
}
}, 1000);
}
}]);
</script>