首頁技術(shù)文章正文

Java培訓(xùn)實戰(zhàn)教程之a(chǎn)ngularJS的雙向數(shù)據(jù)綁定

更新時間:2015年12月29日13時01分來源:傳智播客Java培訓(xùn)學(xué)院瀏覽次數(shù):

angularJS介紹

AngularJS是完全使用JavaScript編寫的客戶端技術(shù)。同其他歷史悠久的Web技術(shù)（HTML、CSS和JavaScript）配合使用，使Web應(yīng)用開發(fā)比以往更簡單、更快捷。它提供了開發(fā)者在現(xiàn)代Web應(yīng)用中經(jīng)常要用到的一系列高級功能，例如：解耦應(yīng)用邏輯、數(shù)據(jù)模型和視圖，Ajax服務(wù)依賴注入，雙向數(shù)據(jù)綁定等。

我們今天講述一下angularJS中的雙向數(shù)據(jù)綁定
我們使用了Hbuilder來完成案例的編寫

示例編寫與演示

第一步:創(chuàng)建web項目并引入angularJS的腳本文件

第二步編寫html代碼

備注1: <html ng-app=”myapp”> ng-app它是angularJS的一個指令，它表示當(dāng)前頁面是受angularJS控制的。

備注2：我們引入了一個我們自己的js文件main.js
備注3:ng-controller 是angularJS的一個指令，它描述了一個控制器，指示當(dāng)前元素是受該控制器控制
備注4:ng-model是angularJS的一個指令，它描述數(shù)據(jù)綁定的模型
備注5:{{message}} angularJS的表達(dá)式寫在雙大括號內(nèi)，它可以輸出數(shù)據(jù)

第三步編寫main.js文件

在angularJS中所有的一切都是以模塊為根本，所以我們先聲明一個模塊myapp,注意，我們在這里指定的模塊的名稱，后面的”[ ]”必須存，它代表當(dāng)前模塊與其它模塊無關(guān)聯(lián)。

myapp.controller(),我們創(chuàng)建了一個當(dāng)前控制的控制器，它的名稱叫myController,而后面的大括號內(nèi)我們使用angularJS提供的依賴注入的方式，將$scope對象傳遞到我們指定的函數(shù)中，通過$scope我們可以獲取受myController控制器控制的模型的對象，簡單說就是我們通過操作message來操作我們在頁面上指定的模型中的數(shù)據(jù)(雙向數(shù)據(jù)綁定)