初識angular體驗(yàn)(四)-創(chuàng)新互聯(lián)

親們，大家好，又到了我們angular每周分享的時(shí)間啦，從這周開始呢我準(zhǔn)備把a(bǔ)ngular的基礎(chǔ)知識給大家講解下，歡迎大家隨時(shí)留言，一起討論問題！

主要從事網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、成都響應(yīng)式網(wǎng)站建設(shè)公司、程序開發(fā)、微網(wǎng)站、微信平臺小程序開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等多方位專業(yè)化運(yùn)作于一體，具備承接不同規(guī)模與類型的建設(shè)項(xiàng)目的能力。

首先給大家介紹下雙向數(shù)據(jù)綁定，angular的數(shù)據(jù)綁定是數(shù)據(jù)模型(model)與視圖(view)組件的自動(dòng)同步。angular的實(shí)現(xiàn)方式允許你把應(yīng)用中的模型看成單一數(shù)據(jù)源。而視圖始終是數(shù)據(jù)模型的一種展現(xiàn)形式。當(dāng)模型改變時(shí)，視圖就能反映這種改變，反之亦然。

下面我們先來看一段代碼：

<div ng-app="hd" ng-controller="ctrl">
    <div>`name`</div>
</div>
<script>
    var m = angular.module('hd', []);
    //雙向數(shù)據(jù)綁定
    m.controller('ctrl', ['$scope', function ($scope) {
        //viewModel
        $scope.name = '學(xué)習(xí)angular';//model   server
    }]);
</script>

以上代碼的運(yùn)行結(jié)果是學(xué)習(xí)angular。

解讀：這里的"{{}}"相當(dāng)于"ng-model"指令，其實(shí)就是一種綁定，但是僅從這個(gè)例子，不能說實(shí)現(xiàn)了雙向數(shù)據(jù)綁定。這里是將angular的數(shù)據(jù)模型（Model）的值綁定到了視圖（View）上了。

上面介紹的不能算是雙向數(shù)據(jù)綁定，下面引出真正的雙向綁定，那么雙向數(shù)據(jù)綁定有何應(yīng)用場景，什么樣的情況需要數(shù)據(jù)模型與視圖能夠相互映射相互影響呢，可能是你沒有察覺，現(xiàn)在很多的網(wǎng)站都能看到這種思想帶來的極大便捷，比如說表單，在填寫或提交表單時(shí)，界面上會(huì)根據(jù)用戶的操作做出及時(shí)的相應(yīng)，這就是一種雙向數(shù)據(jù)綁定的最有力的應(yīng)用場景。

注意：這個(gè)例子很好地詮釋了什么是雙向綁定。

<div ng-app="hd" ng-controller="ctrl">
    <div>`name`</div>
    <input type="text" ng-model="name">
</div>
<script>
    var m = angular.module('hd', []);
    //雙向數(shù)據(jù)綁定
    m.controller('ctrl', ['$scope', function ($scope) {
        //viewModel
        $scope.name = '學(xué)習(xí)angular';//model   server
    }]);
</script>

運(yùn)行結(jié)果如下

初識angular體驗(yàn)(四)

首先在html中聲明了兩個(gè)標(biāo)簽：一個(gè)輸入框input和一個(gè)div塊級標(biāo)簽。

顯然采用了兩種綁定的方式：{{}}和ng-model，但是功能都是數(shù)據(jù)綁定，與js文件中控制器中的$scope.name進(jìn)行了綁定。所以，通過js中$scope.name的賦值會(huì)使得前臺Html中input和div同時(shí)顯示"學(xué)習(xí)angular"。

在輸入框中的任何輸入都會(huì)及時(shí)的反應(yīng)在下面的div中，這也說明了在Html中改變數(shù)據(jù)也會(huì)及時(shí)的映射到后臺數(shù)據(jù)模型，真正的實(shí)現(xiàn)了雙向數(shù)據(jù)綁定。

本想在本篇再介紹下angular的其它東西，限于時(shí)間和篇幅，留在下篇吧，如果覺得有用，記得點(diǎn)贊哦！?。?/p>

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

本文名稱：初識angular體驗(yàn)(四)-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://bm7419.com/article14/dposde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站排名、域名注冊、品牌網(wǎng)站制作、虛擬主機(jī)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名