1. XMLHTTPRequest
$http是AngularJs的一个核心服务，用于读取远程服务器上的数据。
json文件内容如下
[
{type:"apple", weight:"3kg"},
{type:"orange", weight:"2kg"}
]<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;});
});
</script>$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中全局函数被覆盖的问题
参考：
扫一扫
1509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
