首頁 > web前端 > js教程 > AngularJS入門教學(零):引導程式_AngularJS

AngularJS入門教學(零):引導程式_AngularJS

WBOY
發布: 2016-05-16 16:28:33
原創
1382 人瀏覽過

我們現在開始準備寫AngularJS應用程式——phonecat。這一步(步驟0),您將會熟悉重要的原始碼文件,學習啟動包含AngularJS種子專案的開發環境,並在瀏覽器端執行應用程式。

進入angular-phonecat目錄,執行以下指令:

複製程式碼 程式碼如下:

git checkout -f step-0

該指令將重設phonecat專案的工作目錄,建議您在每一學習步驟執行此指令,將指令中的數字改為您學習步驟對應的數字,該指令將清除您在工作目錄內所做的任何更改。

執行以下指令:

複製程式碼 程式碼如下:

node scripts/web-server.js

來啟動伺服器,啟動後命令列終端將會提示Http Server running at http://localhost:8000,請不要關閉該終端,關閉該終端即關閉了伺服器。在瀏覽器中輸入http://localhost:8000/app/index.html來存取我們的phonecat應用程式。

現在,在瀏覽器中您應該已經看到了我們的初始應用,很簡單,但說明我們的專案已經可以運行了。

應用程式中顯示的「Nothing here yet!」是由以下HTML程式碼建構而成,程式碼中包含了AngularJS的關鍵元素,正是我們需要學習的。

app/index.html

複製程式碼 程式碼如下:




   
    My HTML File
   
   
   


Nothing here {{'yet' '!'}}




程式碼在做什麼?

ng-app指令:

複製程式碼 程式碼如下:


ng-app指令標記了AngularJS腳本的作用域,在中加入ng-app屬性即說明整個都是AngularJS腳本作用域。開發者也可以在局部使用ng-app指令,如

,則AngularJS腳本只在該
中執行。

AngularJS腳本標籤:

複製程式碼 程式碼如下:


這行程式碼載入angular.js腳本,當瀏覽器將整個HTML頁面載入完畢後將會執行該angular.js腳本,angular.js腳本運行後將會尋找含有ng-app指令的HTML標籤,該標籤即定義了AngularJS應用的作用域。

雙大括號綁定的表達式:

複製程式碼 程式碼如下:

Nothing here {{'yet' '!'}}


這行程式碼示範了AngularJS模板的核心功能-綁定,這個綁定由雙大括號{{}}和表達式'yet' '!'組成。

這個綁定告訴AngularJS需要運算其中的表達式並將結果插入DOM中,接下來的步驟我們將看到,DOM可以隨著表達式運算結果的改變而即時更新。

AngularJS表達式Angular expression是一種類似JavaScript的程式碼片段,AngularJS表達式僅在AngularJS的作用域中運行,而不是在整個DOM中運行。

引導AngularJS應用

透過ngApp指令來自動引導AngularJS應用是一種簡潔的方式,適合大多數情況。在進階開發中,例如使用腳本裝載應用,您也可以使用bootstrap手動引導AngularJS應用。

AngularJS應用引導過程有3個重要點:

1.注入器(injector)將用於建立此應用程式的依賴注入(dependency injection);
2.注入器將會建立根作用域作為我們應用模型的範圍;
3.AngularJS將會連結根作用域中的DOM,從用ngApp標記的HTML標籤開始,逐步處理DOM中指令和綁定。

一旦AngularJS應用引導完畢,它將繼續偵聽瀏覽器的HTML觸發事件,例如滑鼠點擊事件、按鍵事件、HTTP傳入回應等改變DOM模型的事件。這類事件一旦發生,AngularJS將會自動偵測變化,並進行相應的處理及更新。

上面這個應用的結構非常簡單。此模板包僅包含一個指令和一個靜態綁定,其中的模型也是空的。下一步我們試試稍複雜的應用!

我工作目錄中這些文件是做什麼的?

上面的應用來自於AngularJS種子項目,我們通常可以使用AngularJS種子項目來創建新項目。種子專案包括最新的AngularJS程式碼庫、測試庫、腳本和一個簡單的應用程式範例,它包含了開發一個典型的web應用程式所需的基本配置。

對於本教程,我們對AngularJS種子項目進行了下列更改:
1.刪除範例應用程式;
2.新增手機影像到app/img/phones/;
3.新增手機資料檔(JSON)到app/phones/;
4.新增Twitter Bootstrap檔案到app/css/ 和app/img/。

練習

試試看把關於數學運算的新表達式加到index.html:

複製程式碼 程式碼如下:

1 2 = {{ 1 2 }}


總結

現在讓我們轉到步驟1,將一些內容加入到web應用程式中。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板