2014年7月24日 星期四

AngularJS簡介

AngularJS是一個由Google打造的Javascript框架,目標是透過MVC(Model View Control)功能使開發和測試變得更加容易,直接將HTML(DOM)當成Template來使用,變成可複用的元件,強調關注點分離概念,將商業邏輯從HTML中分離,清楚的切割網站前、後端,簡化後端的開發,另外尚強調「資料雙向繫節」的概念,在CRUD類型的網站專案也是最實用功能之一。

一、載入套件,就如使用JQuery一樣需要先載入後使用
語法:<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
將之加入<head></head>之間。
二、在<html>標籤中加入ng-app屬性以利AngularJS識別,也可以在欲使用範圍內加入該標籤
<html ng-app>......</html>
三、AngularJS Expression
使用{{}}並輸出,如下
{{"1 + 1 = " + (1+1)}}
{{"8 + 8 = " + 8*8}}
結果
{{"1 + 1 = " + (1+1)}}
{{"8 * 8 = " + 8*8}}

四、Filter特性
可以修飾、過濾表達式輸出的內容如欲輸出小數點後兩位等特殊條件。
{{98|double:2}}//小數點後兩位
{{I AM WEIHANCHEN|lowercase}}//轉小寫
結果
{{98|number:2}}
{{"I AM WEIHANCHEN"|lowercase}}

五、測試語法網站:http://jsbin.com/viyuw/1/edit
六、學習資源:
1.Code School:https://www.codeschool.com/
2.AngularJS官網:https://angularjs.org/
3.男丁格爾:http://abgne.tw/category/angularjs

沒有留言:

張貼留言