『AngularJS』 Hello AngularJS
前端工程獅，最近這個獅群越來越龐大，越來越不容忽視。
從最早以前，會寫Javascript就很屌的時代....
到Jquery出現...讓你write less do more的時代....
現在又到了AngularJS、Knockout等技術的出現....
列出以上，只是因為，我只聽過或稍微用過上述的技術，沒列出來的不代表族群不龐大。
我畢業後寫程式....真的....連Javascript或Jquery都寫不太好。
But，技術就是一個一個學。
六月底接到公司主管指派我來認識認識AngularJS，至此之後，我就來一探究竟了。
同時，七月底要給同事群上個課認識一下A先生，心中OS：我沒做過這檔事阿！！
到今天，透過我的學習過程，大致上已經完成一個AngulaJS 配合 .net MVC3 的CRUD範例。
此範例使用此作者寫的.net MVC 對於XML的CRUD範例作為處理我們Service部分，讓我們專注於View的撰寫。
原文網址：http://www.gregjopa.com/2011/04/crud-operations-with-xml-data-in-asp-net-mvc-3/
我承認或許不是寫的很對，大家可以一起切磋一下。
學技術....第一個一定學Hello World一下阿！！！
AngularJS有幾個特點，我列出來我目前可以理解的部分。
1.雙向綁定：透過ng-model，讓定義出來的物件可以在View 和 寫的 JS 做及時的綁定（稍後範例可以表達）
2.View、Model、Controller 分工完美，搞的很像寫.net MVC一樣，可以做到分工。
View：基本上就負責畫面呈現。
Modle：管理Controller、Directive、Filter、Serivce的模組。
Controller：基本上大部分的事情都在Controller中處理。
3.宣告式語法(Directives Syntax)：除了自訂的也可以自己寫擴充的語法。（But，這塊看了幾個大師寫的文章後，還是有點無法參透）
這篇文章我們就先介紹，一個AngularJS基本的寫法吧！！
未來所有相關文章都會使用以下：
1.用JS Bin做範例網站。
2.include AngularJS：https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js
3.使用Bootstrap CSS： http://getbootstrap.com/ （這東西目前好像也頗夯、甚至有些求職說這東西是可額外加分的項目，但我也是第一次使用）
寫AngularJS基本上除了include AngularJS，再來最重要的就是加入 ng-app 這個屬性。
ng-app 主要是告訴AngularJS那個區域是他負責的區塊。
所以，在還沒清楚瞭解前，我們宣告整份Html都是AngularJS要處理的區塊，因此改變<html>改變為<html ng-app>。
現在我們做一個跟自己打招呼 ＆ 加法和乘法的範例。
<!doctype html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
</head>
<body>
<div class="well span6">
<label>姓名:</label>
<input type="text" placeholder="輸入大名" ng-model="Name">
<hr>
Hello:<span style="color:blue;font-size:20" > {{Name}}</span>!! Welcome
</div>
<div class="well span6">
<label>數學教學時間:</label>
加法：X + Y = ?<br/>
加法：
<input type="number" ng-model="X" style="width:100px" placeholder="X">
+
<input type="number" ng-model="Y" style="width:100px" placeholder="Y">
= {{ X+Y }}<br/>
乘法：
<input type="number" ng-model="X" style="width:100px" placeholder="X">
*
<input type="number" ng-model="Y" style="width:100px" placeholder="Y">
= {{ X*Y }}
<br/>為何畫面一開始乘法答案會是null？？<a href="http://jsbin.com/jodami/1/edit" target="_blank"> 下回揭曉</a>
</div>
</body>
</html>
完整個Code如上。Live Demo ：http://jsbin.com/kowuj/1/edit
這個頁面總共做了幾件事情：
- 宣告了五個Input，同時宣告了3個ng-model ：Name、X、Y
- 輸入Name後，顯示Hello:{{Name}}！！
- 輸入X、Y後做加法和乘法的結果。
AngularJS我想最讓我驚艷的部分是：雙向綁定這個特性。
當我們宣告ng-model後，基本上就已經做了雙向綁定這件事情。
透過{{}}兩個大括弧我們可以在裡面做一般的程式撰寫。（當然，就理念上是不建議在裡面寫太複雜的邏輯概念）
所以，我們宣告了一個input 同時ng-model = "Name"
當使用者輸入則{{ Name }}就做了立即的綁定，同步了結果。
這篇就介紹到這裡，希望對各位有所幫助。
學習過程的教學資源：
- 黑暗執行緒：http://blog.darkthread.net/post-2014-06-11-angularjs-notes-1.aspx
- 男丁格爾：http://abgne.tw/category/angularjs/angularjs-getting-stared
- 對岸的AngulaJS社群：http://www.angularjs.cn/
- 當然還有AngularJS的官網嚕：https://docs.angularjs.org/guide
或許我寫的地方有很多錯誤，請大家盡量指教，有任何想法大家也可以一起討論。
截至目前感受到AngularJS帶給我的是：處處驚奇、處處困難。
學習曲線或許真的高....但，我們可以一起做好的！！
PS:其實，我已經寫了七篇的教學範例，但還沒著手寫教學文有興趣的可以先看Liev Demo，
用這七篇的技術，已經可以完成一個簡單的CRUD功能，也....應該是介紹完頗實用的技術，
先感受一下AngularJS的強大，再接受他的高學習曲線。
L2 ng-controller的出現：http://jsbin.com/jodami/2/edit
L3 ng-show 、 ng-hide的運用：http://jsbin.com/wuruc/1/edit
L4 ng-switch應用：http://jsbin.com/wepuka/1/edit
L5 ng-repeter & filter 現身：http://jsbin.com/kuqeca/1/edit
L6 ng-option AngularJS界的下拉選單：http://jsbin.com/fefad/1/edit
L7 打造AngularJS界的CheckboxList：http://jsbin.com/jiyohe/1/edit