AngularJs教程(二)
2015-12-07 11:23
627 查看
1. XMLHTTPRequest
$http是AngularJs的一个核心服务,用于读取远程服务器上的数据。json文件内容如下
[
{type:"apple", weight:"3kg"},
{type:"orange", weight:"2kg"}
]index.html文件
<div ng-app="myApp" ng-controller="fruitCtrl"> <ul> <li ng-repeat="x in tips"> {{x.type + ' ' + x.weight}} </li> </ul> </div> <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('fruitCtrl', function($scope, $http) { $http.get("data_json.php") .success(function(response) {$scope.tips = response.records;}); }); </s 4000 cript>
$http.get()从服务器上面获取静态json数据
控制器对象有一个属性$scope.tips,加载json数据时,变成一个数组,用于存数据。
2. 跨域HTTP请求
如果需要从不同的服务器上获取数据,那么就需要使用跨域HTTP请求可以用以下代码进行跨域请求(PHP)
header("Access-Control-Allow-Origin: *");
3. AngularJs HTML DOM
AngularJs为HTML DOM的属性提供了绑定应用数据的指令3.1
ng-disabled指令
ng-disabled值为true or false该指令绑定了HTML的disabled属性
<!DOCTYPE html> <html> <head> <meta charset="utf8"> </head> <body> <div ng-app="" ng-init="switch=true"> <input type="button" value="click on me" ng-disabled="switch"> </div> <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script> </body> </html>
按钮显示为不可点状态
3.2
ng-show
ng-show指令隐藏或显示HTML元素也可以用表达式来计算布尔值
<!DOCTYPE html> <html> <head> <meta charset="utf8"> </head> <body> <div ng-app="" ng-init="weight=200"> <p ng-show="true">you can see me!</p> <p ng-show="false">you cant see me!ha ha!</p> <p ng-show="weight<300">the weight less than 300,so you can see me!</p> </div> <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script> </body> </html>
3.3
ng-hide
ng-hide指令同样用来隐藏或显示html元素4. AngularJs事件
4.1
ng-click
ng-click指定了AngularJs点击事件<!DOCTYPE html> <html> <head> <meta charset="utf8"> </head> <body> <div ng-app="" ng-init="count=0"> <input type="button" ng-click="count=count+1" value="每点击一次下方数字就会加上一"> <p>{{count}}</p> </div> <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script> </body> </html>
点击按钮五次的效果
4.2
隐藏/显示html元素
下面的例子中用到了控制器的方法<!DOCTYPE html> <html> <head> <meta charset="utf8"> </head> <body> <div ng-app="myapp" ng-controller="showCtrl"> <input type="button" ng-click="toggle()" value="show/hide"> <p ng-hide="flag">text........</p> </div> <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('myapp', []); app.controller('showCtrl', function($scope){ $scope.flag = false; $scope.toggle = function(){ $scope.flag = !$scope.flag; }; }); </script> </body> </html>
效果如下
点击按钮
下方文字隐藏
5.AngularJs模块
上面的例子中也可以将js文件外部引用//包含模块定义程序 <script type="text/javascript" src="myapp.js"></script> //包含了控制器 <script type="text/javascript" src="ctrl.js"></script>
myapp.js
var app = angular.module('myapp', []);
[]参数用于定义模块的依赖关系
如有依赖关系,则在[]中写入模块的名称
ctrl.js
app.controller('showCtrl', function($scope){ $scope.flag = false; $scope.toggle = function(){ $scope.flag = !$scope.flag; }; });
ps:AngularJs让所有的函数的作用域在该模块下,有效避免了JavaScript中全局函数被覆盖的问题
AngularJs教程(二)
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- XML 与 JSON 优劣对比
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- IE8开发人员工具教程(二)