AngularJS 學習筆記(1)-簡介
在正式開始之前，先來大致規劃一下此學習筆記的架構。預計會分成入門篇、API篇、應用篇…等。(AngularJs 在此簡稱 ajs)
(一)入門篇:解說ajs的基本概念與核心結構。
(二)API篇:ajs內建的ng功能使用方法。
(三)應用篇:使用ajs並搭配後端進行實際演練。(後端預計採用codeigniter)
目錄:
序:
AngularJs是甚麼??根據維基百科說它是一款開源 JavaScript函式庫，由Google維護。並採用MVC(MVW?)模式，希望使開發和測試變得更容易。或許有人會問，它與jQuery都一樣是javascript函式庫，那他們之間有甚麼分別?? 在我還未接觸ajs之前我大概會跟你說，它們就只是[語法不同]或者[一個只是用MVC模式而另一個不是]這樣的答案。但當我實際接觸它之後才發現我大錯特錯，錯得可厲害了!!它們之間的差異簡直是天差地遠!!(哀~~之前還真的這樣告訴過別人…現在想想都不好意思了)
在我的看來jQuery 比較像是一個將javascript簡化的工具，讓我們可以非常容易的去運用javascript，就如同jQuery的標語[The Write Less, Do More](寫得更少，做更多的事)，並且jQuery裡面提供了大量的內建功能，讓我們可以輕易的實現許多效果，但由於jQuery是以簡化javascript為主，所以它跟原生的javascript語法上實在有些差異。
而angularJS則比較像是原生的javascript進階版，它強化了javascript的功能讓我們可以用javascript來擴展HTML和驚人的動態雙向綁定。
註:(angularJS還是有把javascript常用的功能，建立簡化成的API)
由此便能看出angularJS與jQuery的差異，一個是以容易使用javascript作為目標，而另一個是以javascript plus 作為目標，兩個的出發點從一開始就不一樣了。不過正因為angularJS是以進階版javascript作為目標，所以個人覺得它會比較難學習，因為javascript就已經夠難了，而它竟然還是進階版!!
所以從jQuery轉angularJS我個人會覺得會非常之辛苦，有點越級打怪的fu。(建議要學angularJS必須先去了解javascript的基本用法)
不過話又說回來，google似乎也有發現許多人是從jQuery轉過來的，所以在ajs當中加入了jQuery lite 讓我們使用^^
angularJS基本結構:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <meta charset="UTF-8"> <html ng-app=""> <head> </head> <body> <p>姓名: <input type="text" ng-model="name"/></p> {{name}} <p ng-bind="name"></p> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script> </body> </html> |
解說:
第三行:
ng-app用來宣告ajs的應用程式範圍，通常都會將ng-app放置<html>或<body>，宣告整個頁面都是ajs的範圍。
註(1):ng-app在整個頁面只能放置一個。
註(2):ng-app="此處放置module名稱"。(此部分以後再說)
第七行:
ng-model是ajs的一大特色，可用來動態綁定數據(類似一個動態的變數)，而它可作用在[input]、[select]、[textarea]內
例如:
<input type=”text” ng-model=”name”/>
會自動產生一個 $scope.name的變數(物件屬性)，裡面會動態存放input 所輸入的值。
第八行、第九行:
這裡的的 {{ name }} 與 ng-bind=”name” 基本上功能是相同的。
{{ }} :在ajs裡面當作表達式(expression)，用來輸出ajs的變數和函數或其他運算式等。
例如上面的範例
{{name}} 會輸出我們在<input type=”text” ng-model=”name”/>所輸入的內容，ng-bind=”name” 也會輸出同樣的結果。
{{ name }} 與 ng-bind 兩者之間的差異，僅在於表達式會在頁面尚未加載好之前，顯示出尚未編譯的內容，而ng-bind則會顯示空白。
感謝您的閱讀，請用力地分享讓大家知道吧~~
很抱歉，此文章關閉留言