AngularJS 學習筆記(1)-簡介

在正式開始之前,先來大致規劃一下此學習筆記的架構。預計會分成入門篇、API篇、應用篇…等。(AngularJs 在此簡稱 ajs)

(一)入門篇:解說ajs的基本概念與核心結構。

(二)API篇:ajs內建的ng功能使用方法。

(三)應用篇:使用ajs並搭配後端進行實際演練。(後端預計採用codeigniter)

目錄:

1.AngularJS 學習筆記(1)-簡介

序:

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基本結構:

 

 解說:

第三行:
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則會顯示空白

感謝您的閱讀,請用力地分享讓大家知道吧~~

Aidec Li
學我所見,寫我所學。凡事略懂略懂~~
更多 Aidec Li 的文章...

推薦文章

發表評論