[AngularJS 學習筆記] AngularJS 概述和核心基本觀念教學

本學習筆記共分五章，參照 Code School 中的 Shaping Up With AngularJS 互動式教學、官方文件和 AngularJS 書籍編寫（此線上教材為 Google 官方贊助，學習安排上也十分有趣，非常推薦給初心者），希望能提供 AngularJS 初學者有個入門的方向。

1.1 Ramp Up
1. Requirement (HTML/CSS/JavaScript/BDD/TDD)
2. Why Angular ?
(1) Organize your JS
(2) create Responsive Web App
(3) Play with jQuery
(4) Easy to test
3. Modern API Driven App / Request <-> Response

圖一、Web Request / Response

Server DB/API -> Mobile App/Browser App/Developer

圖二、Modern API Driven App

4. Install Angular / Bootstrap

圖三、AngularJS 核心概念 via Code School

5. Directive(Marker on HTML expand HTML ability and reference to some JS code)
6. Module(dependence) maintainable / reuseable /testable
var app = angular.modeule(’store’, []); // store is app name [] -> dependencies(other library)
7. Controller
defined app behavior via function / value
8. Expression {{ 1 + 4 }}
將程式碼放入自調用函數形成 closure ，彼此命名空間才不會互相干擾
(function(){
})();

1.3 Index HTML Setup
1. Controller - app behavior
(1) ng-controller as Alias
(2) Scope

1-5 Built-in Directives
1. ng-show / ng-hide
2. ng-repeat
JS Bin

Directives - HTML annotation that triggerJS behaviors
Modules - Where our app components live
Controllers - Where we add app behavior
Expressions - How values get displayed within the page