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中全局函數被覆蓋的問題
參考：
