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>