彰化一整天的論壇

 找回密碼
 立即註冊
查看: 1305|回復: 3

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

[複製鏈接]
發表於 2013-9-18 16:04:33 | 顯示全部樓層 |閱讀模式
HTML是打造Web的根本,但是它最早的設計概念是文件式的,它被當成是一頁頁的文件/資源來看待。

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

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

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

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

不過在那之前,不免俗的先來一個Hello World的程式。
  1. <!DOCTYPE html>
  2. <html ng-app>
  3.   <head>
  4.     <title>邊學AngularJS邊做Todo List (1)</title>
  5.     <script type="text/javascript" src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  6.   </head>
  7.   <body>
  8.     <h1>Hello World</h1>
  9.         <p>AngularJs say hello to {{yourName || 'everyone'}}!</p>
  10.       <label>輸入你的姓名,Angular會跟你打招呼</label>
  11.       <input type="text" ng-model="yourName">
  12.   </body>
  13. </html>
複製代碼
完成後長這樣:



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 ::完整的程式碼


source: http://ithelp.ithome.com.tw/question/10095041
回復

使用道具 舉報

發表於 2015-1-2 19:28:57 | 顯示全部樓層
提示: 作者被禁止或刪除 內容自動屏蔽
回復 支持 反對

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  

GMT+8, 2019-12-13 19:10 , Processed in 0.164564 second(s), 20 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表