AngularJs學習筆記2-控制器、數據綁定、做用域

時間 2019-11-22

標籤 angularjs 學習筆記控制器數據綁定欄目 AngularJS 简体版

原文原文鏈接

上次分享完該系列文章後有朋友也建議說1.x版本除了維護也沒有必要學習，能夠學習2.0開始學習，我也知道1.x不管是從性能仍是架構上都沒有2.x好，可是我想由於如今也有一些朋友還在用1.x版本，由於1.x升級到2.x難度很大，甚至能夠說重構，就向咱們公司如今還在用1.x版本，因此我仍是決定把這系列寫完，也給本身一個整理的過程。本人如今也正在學習Angular4.0版本的學習，可是4.0用typescript及nodejs集成比較大，還有學習angular-cli腳手架的學習，因此等我學會之後準備在分享給你們。這個暫時先不討論，今天繼續給你們分享控制、數據綁定、做用域的知識點。javascript

一、控制器：html

　　概念：在angularJS中控制器是一個函數，用來向視圖的做用域添加額外的功能，用來設置做用域的初始狀態並添加自定義行爲。java

控制器的聲明： app.controller(‘controllerName’,function($scope){...})node

//    控制器定義
    //    第一參數： 控制器名稱， 第二個參數： 匿名函數， 傳入做用域,並在做用域上添加額外功能
    app.controller('myCtrl', function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
        $scope.subCtrl = "hello subCtrl";

    });

控制器的使用：在須要的地方（html某個標籤上）添加ng-controller。typescript

 
         < 
         body  
         ng-app="myapp" ng-controller="myCtrl">

　從上面看控制的定義和使用仍是比較簡單的，可是不少人會對控制器的做用及控制器中都須要寫什麼代碼有些不瞭解，有的人會把整個代碼都推擠到控制器中，我我的以爲控制器只是一個頁面view及mode的一個紐帶，只處理一些數據綁定，事件綁定等等一些列簡單的邏輯，具體的服務器訪問或者數據讀取等應該在服務裏去實現，服務我在下次的時候會詳細給你們說。express

我簡單對控制使用方面注意的事項整理了一下，供你們參考：服務器

1）儘量精簡控制器和$scope相關的操做。
2）不要複用Controller,一個控制器通常只負責一小塊視圖。
3）不要在Controller中操做DOM，這不是控制器的職責。
4）儘可能不要在Controller裏作數據過濾、數據操做。
5）通常來講，Controller裏不會互相調用的，控制器之間的交互會經過事件進行網絡

　二、做用域（$scope）架構

上面控制器中也提到做用域，控制器主要跟$scope相關的操做，我簡單給你們說一下做用域在AngularJs中的做用及他的生命週期，我用內部分享時的總結貼出來給你們分享一下：app

三、數據綁定：

　　　 AngularJs數據綁定也有好幾種綁定，我給你們列出來，有可能你們都用過，有可能有的朋友有些綁定沒有用過。

1）表達式{{}}：
常量：{{‘const’}}
變量：{{abc}}
函數：{{func()}}
表達式：{{a+b}}

該方法是最爲常見的，表達式綁定，只要在Angular的做用域範圍以內Angular遇到該表達式自動解析爲Html識別的表達式或者變量。

2）指令方式（ng-bind）：

該綁定方式爲在元素上添加ng-bind指令，而後Angular解析指令並執行該綁定。

3）ng-model：

該方式主要用在表單提交方面用的比較多，實現數據雙向綁定，頁面內容及model之間實現雙向數據。

4）ng-bind-html：

　　　　　　該方式爲主要針對Html元素綁定時用，由於Angularjs默認對Html標籤不作解析，直接輸出，因此想在頁面上顯示Html標籤內容能夠藉助該綁定方法，可是該綁定須要引用一個序列化js文件。

 <script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js"></script>

5）ng-bind-template：

　　　　該方式能夠一次綁定多個變量及表達式。

使用場景：

首頁使用ng-bind，模板裏面的頁面可使用括號 {{}}，表單使用ng-model，{{}}語法的缺陷：在用戶的不斷刷新中是有可能看到{}的；並且在網絡很差的狀況下也有可能看到

以下代碼爲把上述五種方法的總體代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <!--引用AngularJs庫    -->
    <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js"></script>
    <!--    引入angularJs Html格式化庫-->
    <script type="text/javascript" src="/lib/angular-1.3.0.14/angular-sanitize.min.js"></script>
</head>

<!--   數據綁定方式一、{{}} 二、指令綁定 三、ng-bind綁定 四、ng-bind-html綁定 五、ng-bind-template綁定-->

<body ng-app="myapp" ng-controller="myCtrl">
    <!--    一、表達式綁定 -->
    <h1>{{expression}}</h1>
    <!-- 二、指令綁定-->
    <h2>{{ngmodel}}</h2>
    <input type="text" ng-model="ngmodel">
    <!--    三、ng-bind綁定-->
    <h3 ng-bind="ngbind"></h3>
    <h3 class="ng-bind:ngbind"></h3>
    <!--    四、ng-bind-html綁定-->
    <h4 ng-bind-html="htmlbind"></h4>
    <!--    五、ng-bind-template -->
    <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>

</html>
<script>
    //模塊定義
    // 第一個參數：應用名稱，第二個參數：應用依賴模塊
    var app = angular.module('myapp', ['ngSanitize']);

    //    控制器定義
    //    第一參數： 控制器名稱， 第二個參數： 匿名函數， 傳入做用域,並在做用域上添加額外功能
    app.controller('myCtrl', function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
        $scope.subCtrl = "hello subCtrl";

    });

</script>