angularJS介紹
AngularJS是完全使用JavaScript編寫的客戶端技術。同其他歷史悠久的Web技術(HTML、CSS和JavaScript)配合使用,使Web應用開發(fā)比以往更簡單、更快捷。它提供了開發(fā)者在現代Web應用中經常要用到的一系列高級功能,例如:解耦應用邏輯、數據模型和視圖,Ajax服務依賴注入,雙向數據綁定等。
我們今天講述一下angularJS中的雙向數據綁定
我們使用了Hbuilder來完成案例的編寫
示例編寫與演示
第一步:創(chuàng)建web項目并引入angularJS的腳本文件
第二步編寫html代碼
備注1: <html ng-app=”myapp”> ng-app它是angularJS的一個指令,它表示當前頁面是受angularJS控制的。
備注2:我們引入了一個我們自己的js文件main.js
備注3:ng-controller 是angularJS的一個指令,它描述了一個控制器,指示當前元素是受該控制器控制
備注4:ng-model是angularJS的一個指令,它描述數據綁定的模型
備注5:{{message}} angularJS的表達式寫在雙大括號內,它可以輸出數據
第三步編寫main.js文件
在angularJS中所有的一切都是以模塊為根本,所以我們先聲明一個模塊myapp,注意,我們在這里指定的模塊的名稱,后面的”[ ]”必須存,它代表當前模塊與其它模塊無關聯。
myapp.controller(),我們創(chuàng)建了一個當前控制的控制器,它的名稱叫myController,而后面的大括號內我們使用angularJS提供的依賴注入的方式,將$scope對象傳遞到我們指定的函數中,通過$scope我們可以獲取受myController控制器控制的模型的對象,簡單說就是我們通過操作message來操作我們在頁面上指定的模型中的數據(雙向數據綁定)
第四步演示結果
程序執(zhí)行結果如下:
為什么叫雙向數據綁定,當我們將文本框中的內容修改后,我們會發(fā)現頁面上的內容也在改變