AngularJS入門示例之Hello World詳解

更新時間：2017年01月04日 09:29:16 作者：aitangyong

這篇文章主要介紹了AngularJS入門示例之Hello World,較為詳細的分析了AngularJS程序的原理及Hello World程序的創(chuàng)建步驟,需要的朋友可以參考下

本文實例講述了AngularJS入門示例Hello World。分享給大家供大家參考，具體如下：

以前項目都是使用jQuery和原始的JavaScript，最近參加一個項目需要用到AngularJS、RequireJS等比較潮的框架。這里記錄自己的學(xué)習(xí)過程，雖然冠以原創(chuàng)之名，其實都是參考網(wǎng)上的一些資料，加上自己的一些實踐和理解。再沒有熟悉AngularJS之前，估計也不出什么高質(zhì)量的文章，只能算是學(xué)習(xí)筆記和備忘錄。練習(xí)使用的版本是1.2.25。

示例代碼如下：

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>Hello,World!</title>
    <script src="angular1.2.25.js"></script>
  </head>
  <body>
    <input type="text" ng-model="yourName">
      <h1>Hello, {{yourName}}</h1>
  </body>
</html>

用瀏覽器打開這個網(wǎng)頁，在文本框進行輸入，發(fā)現(xiàn)界面會自動實時顯示。如果用javascript或jquery，完成這么一個小功能，我們組要注冊監(jiān)聽事件，獲取text控件的值，然后將值塞入<h1>中顯示。而使用AngularJS，我們需要做的事情是：添加ng-app，添加ng-model，使用{{yourName}}顯示。很顯然，使用AngularJS要簡單的多，而且代碼更緊湊。下面我們簡單看下這3個東西的意思：

1、ng-app：它可以放在任何dom節(jié)點上，代表該結(jié)點以及它的所有子節(jié)點都在AngularJS的管理范圍之內(nèi)；如果去掉這個標記，發(fā)現(xiàn)AngularJS框架不會起效果。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello,World!</title>
    <script src="angular1.2.25.js"></script>
  </head>
  <body>
    <div ng-app>
      <input type="text" ng-model="yourName">
      <h1>Hello, {{yourName}}</h1>
    </div>
    <h1>Hello, {{yourName}}</h1>
  </body>
</html>

這次我們把ng-app放到了<div>上，可以看到div內(nèi)部的<h1>能夠?qū)崟r顯示輸入的數(shù)據(jù)，而外部的<h1>沒有效果?？梢钥吹?，一個html頁面可以全部交予AngularJS來管理，也可以只讓AngularJS管理頁面的一部分，我們可以按需添加ng-app所在的dom節(jié)點。

2、ng-model：這個是AngularJS數(shù)據(jù)的雙向綁定特性。簡單點理解：告訴AngularJS這是個數(shù)據(jù)模型，你幫我存到內(nèi)存中。界面上修改數(shù)據(jù)，內(nèi)存中數(shù)據(jù)也會自動修改；修改內(nèi)存中的變量值，界面顯示也會自動更改。這個特性顯然很方便，能夠保持數(shù)據(jù)的一致性，避免我們自己加代碼來完成這個功能。

3、{{yourName}}：這個是框架提供的表達式語法，能夠顯示內(nèi)存中數(shù)據(jù)模型的值。這個跟struts2的<s:property>、<s:text>類似，就是用來顯示數(shù)據(jù)的。這種只是AngularJS定義的語法格式，跟JSP頁面中的EL表達式，struts2的OGNL很類似，就是一種數(shù)據(jù)的獲取機制。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章: