快捷導(dǎo)航

AngularJS入門示例之Hello World詳解

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

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

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

以前項(xiàng)目都是使用jQuery和原始的JavaScript，最近參加一個(gè)項(xiàng)目需要用到AngularJS、RequireJS等比較潮的框架。這里記錄自己的學(xué)習(xí)過程，雖然冠以原創(chuàng)之名，其實(shí)都是參考網(wǎng)上的一些資料，加上自己的一些實(shí)踐和理解。再?zèng)]有熟悉AngularJS之前，估計(jì)也不出什么高質(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>

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

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

<!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í)顯示輸入的數(shù)據(jù)，而外部的<h1>沒有效果?？梢钥吹?，一個(gè)html頁面可以全部交予AngularJS來管理，也可以只讓AngularJS管理頁面的一部分，我們可以按需添加ng-app所在的dom節(jié)點(diǎn)。

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

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

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

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

您可能感興趣的文章: