AngularJS遇到的第一個坑
Angular JS (Angular.JS) 是一組用來開發Web頁面的框架、模板以及資料繫結和豐富UI元件。無需進行手工DOM操作,相容主流瀏覽器，與 jQuery 配合良好。
資料繫結可能是AngularJS最酷最實用的特性。它能夠幫助你避免書寫大量的初始程式碼從而節約開發時間。一個典型的web應用可能包含了80%的程式碼用來處理，查詢和監聽DOM。資料繫結使得程式碼更少，你可以專注於你的應用。
並不是所有的應用都適合用AngularJS來做。AngularJS主要考慮的是構建CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。但是要了解什麼適合用AngularJS構建，就得了解什麼不適合用AngularJS構建。
如遊戲，圖形介面編輯器，這種DOM操作很頻繁也很複雜的應用，和CRUD應用就有很大的不同，它們不適合用AngularJS來構建。像這種情況用一些更輕量、簡單的技術如jQuery可能會更好。
一、Hello World!
AngularJS使用雙大括號{{}}語法進行資料繫結；
<html ng-app>
<head>
<!-- <script src="https://code.angularjs.org/1.4.8/angular.js"></script> -->
<script src="https://code.angularjs.org/1.2.8/angular.js"></script>
<script >
function FirstCtrl($scope) 現在讓我們仔細看看程式碼，當載入該頁時，標記ng-app告訴AngularJS處理整個HTML頁並引導應用，然後載入了angular.js,然後聲明瞭一個全域性的控制器FirstCtrl（js函式），可以看到在p標籤中聲明瞭這個控制器,緊接著使用{{}}表示式繫結資料。
注意：當我們引用AngularJS的1.4.8版本，也就是上面註釋的一行，我們的程式碼會報下面的異常
Argument ‘FirstCtrl’ is not a function, got undefined；
到這裡鬱悶了一下，心中猜想應該是版本的原因，然後網上搜了一圈，果不其然：
因為從Angular-1.3.0 beta15開始，Angular不再支援全域性的Controller！
二、AngularJS Scope(作用域)
AngularJS 應用組成如下：
- View(檢視), 即 HTML。
- Model(模型), 當前檢視中可用的資料。
- Controller(控制器), 即 JavaScript 函式，可以新增或修改屬性。
scope 是模型。
scope 是一個 JavaScript 物件，帶有屬性和方法，這些屬性和方法可以在檢視和控制器中使用。
上面的示例中，只有一個作用域 scope，處理起來比較簡單，但在大型專案中， HTML DOM 中有多個作用域，這時你就需要知道你使用的 scope 對應的作用域是哪一個。
根作用域：所有的應用都有一個 rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，可以在各個 controller 中使用。
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成員:</h1>
<ul>
<li ng-repeat="x in names">{{x}}{{lastname}}
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>三、AngularJS指令
AngularJS 指令是擴充套件的 HTML 屬性，帶有字首 ng-。除了 AngularJS 內建的指令外，我們還可以建立自定義指令。你可以使用 .directive 函式來新增自定義的指令。
要呼叫自定義指令，HTMl 元素上需要新增自定義指令名。
使用駝峰法來命名一個指令， myselfDirective, 但在使用它時需要以 - 分割, myself-directive:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
</head>
<body ng-app="myApp">
<myself-directive></myself-directive>
<script>
var app = angular.module("myApp", []);
app.directive("myselfDirective", function() {
return {
template : "<p>自定義指令!</p>"
};
});
</script>
</body>
</html>你可以通過元素名、屬性、類名、註釋來呼叫自定義指令。也可以限制你的指令只能通過特定的方式來呼叫。
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<myself-directive></myself-directive>
<div myself-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("myselfDirective", function() {
return {
restrict : "A",
template : "<h1>自定義指令!</h1>"
};
});
</script>
<p><strong>注意：</strong> 通過設定 <strong>restrict</strong> 屬性值為 "A" 來設定指令只能通過 HTML 元素的屬性來呼叫。</p>
</body>
</html>restrict 值可以是以下幾種:
- E 只限元素名使用
- A 只限屬性使用
- C 只限類名使用
- M 只限註釋使用
restrict 預設值為 EA, 即可以通過元素名和屬性名來呼叫指令。
四、AngularJS事件
下面的例子演示了angularjs配合checkbox,button的一些動作。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<!-- <script src="https://code.angularjs.org/1.2.8/angular.js"></script> -->
<script >
//module第一個String引數是該模組的名字，第二個引數是所依賴的模組（這裡暫時用不著），返回了myApp這個模組.
angular.module('myApp', []).controller('CostCtrl',CostCtrl).controller("FirstCtrl", FirstCtrl);
function FirstCtrl($scope){
$scope.data = {message: "World"};
}
function CostCtrl($scope)
{
$scope.cost = 1000;
$scope.tax = true;
$scope.$watch("cost", function(){
$scope.bill_tax = $scope.cost*0.15;
});
$scope.$watch("tax", function(){
$scope.bill_display = $scope.tax?"block":"none";
});
$scope.add = function()
{
alert('hello');
}
}
</script>
</head>
<body >
<p ng-controller="FirstCtrl">Hello {{data.message}}!</p>
<div ng-controller="CostCtrl"><input type="checkbox" ng-model="tax"/><span>tax</span>
<input placeHolder="cost" ng-model="cost">
<p>the money is {{cost|currency:"￥"}}</p><!-- angular過濾器 -->
<div style="display:{{bill_display}}"><p>tax is {{bill_tax}}</p><button ng-click="add()">add</button</div>
</div>
</body>
</html>ng-click指定button的點選事件。