angular入門學習文檔之一

時間 2019-11-12

原文原文鏈接

1、數據雙向綁定

angular（下面統一簡稱ng）強大的地方莫過於它內置的數據雙向綁定功能，下面咱們經過一個簡單的例子來演示ng強大的雙向綁定數據的能力。javascript

代碼以下：html

一、dom結構：java

1.<!DOCTYPE html>
2.<html lang="en" ng-app="myApp">
3.<head>
4.    <meta charset="UTF-8">
5.    <title>Document</title>
6.    <script src="js/angular.js"></script>
7.</head>
8.<body>
9.    <form ng-controller="userInfoCtrl">
10.        <input type="text" ng-model="userInfo.name">
11.        {{userInfo.name}}
12.        <p ng-bind="userInfo.age"></p>
13.    </form>
14.
15.</body>
16.</html>

二、js代碼：node

1.var app = angular.module('myApp',[]);
2.    app.controller('userInfoCtrl',function($scope){
3.        $scope.userInfo = {
4.            name: '張三',
5.            age: '18' 
6.        }
7.    })
8.    app.controller('userInfoCtrl',['$scope',function($scope){
9.        $scope.userInfo = {
10.            name: '張三',
11.            age: '19' 
12.        }
13.    }])

上面的例子簡單的實現了ng的雙向綁定功能，那麼究竟是怎麼實現的呢？瀏覽器

一、先加載angular.js文件；app

二、在根節點html上（也能夠是其餘任何一個節點，在哪裏添加，ng的邊界就在哪裏產生）添加ng-app指令，它會告訴瀏覽器，從這個地方開始，裏面的內容都用ng去解析渲染；dom

三、給form添加ng-controller，這是添加控制器（也能夠叫做用域）的指令，它的做用是建立一個隔離的$scope對象,什麼是$scope?ide

提到$scope，還得先從$rootscope提及，$rootScope是ng中最接近全局做用域的對象。在$rootScope上附加太多業務邏並非好主意，這與污染JavaScript的全局做用域是同樣的。$scope對象就是一個普通的JavaScript對象，咱們能夠在其上隨意修改或添加屬性。this

四、給input添加ng-model指令，值等於變量userInfo.name。ng-model就是實現ng數據雙向綁定的指令。ng-model指令用來將input、 select、 textarea或自定義表單控件同包含它們的做用域中的屬性進行綁定。（這是第一種綁定方法）；spa

五、{{ }}語法是AngularJS內置的模板語法，它會在內部$scope和視圖之間建立綁定。基於這個綁定，只要$scope發生變化，視圖就會隨之自動更新。（這是第二種綁定方法）；

六、儘管能夠在視圖中使用{{ }}模板語法（ng內置的方式），咱們也能夠經過ng-bind
指令實現一樣的行爲。

接下來是Js代碼部分的實現

七、ng容許咱們使用angular.module()方法來聲明模塊，這個方法可以接受兩個參數，第一個是模塊的名稱，第二個是依賴列表，也就是能夠被注入到模塊中的對象列表。接下來，就能夠在angular.module(‘myApp’)返回的對象上建立咱們的應用了。

八、經過ng-controller建立一個做用域，並對做用域中的$scope對象進行操做；

九、在userInfoCtrl這個做用域中，添加控制器邏輯處理的代碼。

十、總結：在ng中，經過controller控制器鏈接了視圖與邏輯層，任何一方發生變化都會引發另外一方的變化，而實現這個功能的方法則能夠經過：ng-model、{{ }}或者ng-bind。

2、常見的幾種頁面判斷

1.ng-switch

ng-switch用來判斷輸入框的值和預約義的值是否匹配，若是匹配，則顯示預約義的視圖，反之則顯示默認的視圖。這個指令和ng-switch-when及on=」propertyName」一塊兒使用，能夠在propertyName發生變化時渲染不一樣指令到視圖中。在下面的例子中，當person.name是Ari時，文本域下面的div會顯示出來，而且這我的會得到勝利：

1.<input type="text" ng-model="person.name"/>
2.<div ng-switch on="person.name">
3.  <p ng-switch-default>And the winner is</p>
4.  <h1 ng-switch-when="Ari">{{ person.name }}</h1>
5.</div>

2.ng-if

使用ng-if指令能夠徹底根據表達式的值在DOM中生成或移除一個元素。若是賦值給ng-if的表達式的值是false，那對應的元素將會從DOM中移除，不然對應元素的一個克隆將被從新插入DOM中。

1.<div ng-if="2+2===5">
2.  Won't see this DOM node, not even in the source code
3.</div>

由於2+2並不等於5，因此表達式爲false，最後這個div會被移除。

3.ng-show、ng-hide

ng-show和ng-hide根據所給表達式的值來顯示或隱藏HTML元素。當賦值給ng-show指令的
值爲false時元素會被隱藏。相似地，當賦值給ng-hide指令的值爲true時元素也會被隱藏。

1.<div ng-show="2 + 2 == 4">
2.  2 + 2 is 4, do show
3.</div>
4.<div ng-hide="2 + 2 == 5">
5.  2 + 2 isn't 5, don't hide
6.</div>

從結果上來看，ng-if和ng-show/ng-hide彷佛效果差很少，但二者的最大區別在於，前者會移除dom結構，然後者不會移除dom結構，只是經過樣式的display:none和display:block來控制。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。