iT邦幫忙

14

邊學AngularJS邊做Todo List (1) - Hello World

HTML是打造Web的根本,但是它最早的設計概念是文件式的,它被當成是一頁頁的文件/資源來看待。

這樣的概念簡單、明白,容易撰寫、也讓Web成為一種非常普及的形式,但是這種文件式的概念,對於發展Web 應用程式來說,卻顯得有些不足了。

在此我們不深論其中的問題,但AngularJS的誕生,就是Google對這個問題的解答之一。

AngularJS是用來開發Web應用程式的框架,它能讓HTML搖身一變成為描述你的應用程式的模板語言,並且可以和資料來源綁定,讓Web應用程式開發更容易。

接下來,我們會利用AngularJS來造一個Todo List ,在這個過程中,邊做邊學AngularJS,從中認識到AngularJS的特色。

不過在那之前,不免俗的先來一個Hello World的程式。
先看程式碼--

<html ng-app>
  
    <title>邊學AngularJS邊做Todo List (1)</title>
    <script type="text/javascript" src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  
  
    <h1>Hello World</h1>
	<p>AngularJs say hello to {{yourName || 'everyone'}}!</p>
      <label>輸入你的姓名,Angular會跟你打招呼</label>
      <input type="text" ng-model="yourName">
  

完成後長這樣:

1.我們在 html的地方加上一個「ng-app」識別,這是AngularJS用來啟動的關鍵字眼,在DOM載入後,AngularJS就會開始尋找這個字,找到的話,就會把這頁面當成是AngularJS應用程式。當然如果只是局部需要用到,而非整站,你也可以把這個字放在某個應用到AngularJS的div中。

2.在header載入了我們的主角 angular-1.0.1.min.js

3.在第9行,我們看到**{{ }}** 這個模版引擎常出現的2個成對大括號,沒錯,這裡就是用來放置變數的,我們這裡放了一個yourName的變數,後面放一個變數是空的時候,用’everyone’來和大家打招呼。

4.關鍵來了,在input的地方,我們放了一個 ng-model,這個我們後面會再詳述,現在就把它當成是資料來源,名稱取成是 yourName,而剛剛上面大括號中的 yourName,就會和這裡輸入的資料綁定。

就這樣,沒有任何一行程式,我們只是在HTML上加上幾個 tag,就完成了這個簡單的互動程式。

大家可以試著輸入自己的名字,再刪掉看看,更能體會AngularJS在資料綁定上的威力。

Live Demo ::完整的程式碼


邊學AngularJS邊做Todo List (1) - Hello World
邊學AngularJS邊做Todo List (2) - Todo List 動起來
邊學AngularJS邊做Todo List (3) - Todo List 刪項目
邊學AngularJS邊做Todo List (4) - 修改待辦事項
邊學AngularJS邊做Todo List (5) - 為測試作準備
邊學AngularJS邊做Todo List (6) - E2E測試(上)


0
ted99tw
iT邦高手 1 級 ‧ 2012-07-13 08:04:52

lalabear提到:
先看程式碼--

先按“推”再說~~讚

0
jyyihch
iT邦新手 5 級 ‧ 2012-07-14 19:05:32

好好用,迫不及待看下一篇。開心

0
lalabear
iT邦新手 2 級 ‧ 2012-07-17 17:59:54

第二篇已經發表了,請移駕到 http://ithelp.ithome.com.tw/question/10095338 ,滿意的話,請按個推

謝謝

我要留言

立即登入留言