（一）AngularJS入門貼之Hello World

（一）AngularJS入門貼之Hello World

以前項目都是使用JQuery和原始的javascript，最近參加一個項目需要用到AngularJS、RequireJS等比較潮的架構。這裡寫一些部落格，記錄自己的學習過程，雖然冠以原創之名，其實都是參考網上的一些資料，加上自己的一些實踐和理解。再沒有熟悉AngularJS之前，估計也不出什麼高品質的文章，只能算是學習筆記和備忘錄。練習使用的版本是當前最新的穩定版本1.2.25。

範例程式碼如下：

      Hello,World!   <script src="angular1.2.25.js"></script>        Hello, {{yourName}}

用瀏覽器開啟這個網頁，在文字框進行輸入，發現介面會自動即時顯示。如果用javascript或jquery，完成這麼一個小功能，我們組要註冊監聽事件，擷取text控制項的值，然後將值塞入中顯示。而使用AngularJS，我們需要做的事情是：添加ng-app，添加ng-model，使用{{yourName}}顯示。很顯然，使用AngularJS要簡單的多，而且代碼更緊湊。下面我們簡單看下這3個東西的意思：

1、ng-app：它可以放在任何dom節點上，代表該結點以及它的所有子節點都在AngularJS的管理範圍之內；如果去掉這個標記，發現AngularJS架構不會起效果。

      Hello,World!   <script src="angular1.2.25.js"></script>Hello, {{yourName}}Hello, {{yourName}}

這次我們把ng-app放到了上，可以看到div內部的能夠即時顯示輸入的資料，而外部的沒有效果。可以看到，一個html頁面可以全部交予AngularJS來管理，也可以只讓AngularJS管理頁面的一部分，我們可以按需添加ng-app所在的dom節點。

2、ng-model：這個是AngularJS資料的雙向繫結特性。簡單點理解：告訴AngularJS這是個資料模型，你幫我存到記憶體中。介面上修改資料，記憶體中資料也會自動修改；修改記憶體中的變數值，介面顯示也會自動更改。這個特性顯然很方便，能夠保持資料的一致性，避免我們自己加代碼來完成這個功能。

3、{{yourName}}：這個是架構提供的運算式文法，能夠顯示記憶體中資料模型的值。這個跟struts2的、類似，就是用來顯示資料的。這種只是AngularJS定義的文法格式，跟JSP頁面中的EL運算式，struts2的OGNL很類似，就是一種資料的擷取機制。