AngularJs學習之控制器、資料綁定、作用域詳解-js教程-PHP中文網

首頁

web前端

js教程

AngularJs學習之控制器、資料綁定、作用域詳解

零下一度

Jul 23, 2017 pm 06:05 PM

angularjsjavascript控制器

1、控制器：

　　概念：在angularJS中控制器是一個函數，用來在視圖的作用域中添加額外的功能，用來設定作用域的初始狀態並新增自訂行為。

控制器的宣告： app.controller('controllerName',function($scope){...})

//    控制器定义//    第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能app.controller('myCtrl', function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "<font>hello,htmlbind</font>";
        $scope.subCtrl = "hello subCtrl";

    });

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

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

　從上面看控制的定義和使用還是比較簡單的，但是很多人會對控制器的作用及控制器中都需要寫什麼程式碼有些不了解，有的人會把整個程式碼都推擠到控制器中，我個人覺得控制器只是一個頁面view及mode的一個紐帶，只處理一些資料綁定，事件綁定等等一些列簡單的邏輯，具體的伺服器存取或資料讀取等應該在服務裡去實現，服務我下次的時候會詳細給大家說。

我簡單對控制使用方面注意的事項整理了一下，供大家參考：

1）盡可能精簡控制器和$scope相關的操作。
2）不要重複Controller,一個控制器一般只負責一小塊視圖。
3）不要在Controller中操作DOM，這不是控制器的責任。
4）盡量不要在Controller裡做資料過濾、資料操作。
5）一般來說，Controller裡不會互相呼叫的，控制器之間的交互會透過事件進行

　2、作用域（$scope）

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

# 3、資料綁定：

　　　 AngularJs資料綁定也有好幾種綁定，我給大家列出來，有可能大家都用過，有可能有的朋友有些綁定沒有用過。

1）表達式{{}}：
變項：{{abc}}
函數：{{ func()}}
表達式：{{a+b}}

# 之後使用時中所綁定時的組合作用時最為常見的表達式，此表達式為最為基礎表達式式自動解析為Html識別的表達式或變數。

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

此綁定方式為在組件上新增ng-bind指令，然後Angular解析指令，然後Angular解析指令。

3）ng-model：

4）ng-bind-html：

　　　　　　此方式為主要針對Html元素綁定時用，因為Angularjs預設對Html標籤解析，直接輸出，所以不做頁面上顯示Html標籤內容可以藉助該綁定方法，但是該綁定需要引用一個序列化js檔案。

 <script></script>

5）ng-bind-template：

　　　　此方式可一次綁定多個變數及表達式。

使用情境：

首頁使用 ng-bind，範本裡面的頁面可使用括號{{}}，表單使用與表單使用》，}} #{{}}語法的缺陷：在使用者不斷的刷新中是有可能看到{}的；而且在網路不好的情況下也有可能看到

如下程式碼為把上述五種方法的整體程式碼：

nbsp;html>



    
    首页
    
    <script></script>
    
    <script></script>





    
    {{expression}}
    
    {{ngmodel}}
    
    
    
    
    
    
    
    



<script>//模块定义// 第一个参数：应用名称，第二个参数：应用依赖模块var app = angular.module(&#39;myapp&#39;, [&#39;ngSanitize&#39;]);//    控制器定义//    第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能app.controller(&#39;myCtrl&#39;, function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "<font color=&#39;red&#39;>hello,htmlbind";
        $scope.subCtrl = "hello subCtrl";

    });</script>

以上是AngularJs學習之控制器、資料綁定、作用域詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles