angularjs學習筆記之三大模組（modal，controller，view）

首頁

web前端

js教程

angularjs學習筆記之三大模組（modal，controller，view）_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:38 PM

angularjs

今天主要跟大家詳細講解一下angularjs的三大模組： modal，controller，view。

先跟大家說一下這三個模組之間的關係。

1.資料模型（modal）主要提供資料。它不會和視圖（view）直接操作。

2.controller保存modal提供的數據，與視圖進行操作。

3.view是視圖，也就是頁面展示。

4.總而言之，controller負責資料和視圖之間的通信，就是兩者的介面人。他們分工明確，實現了模組化。

一.如何使用資料模型（modal）？

講到資料模型，我們再來看看上一節教學的範例：

<!DOCTYPE html>
 <html ng-app="app"> 
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
     <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
     <script src="controll.js"></script> //引入控制器
   </head>
   <body>
     <div ng-controller="controller"> 
       <input type="text" ng-model="text">
       <b>{{greeting.text}} {{text}}</b>
     </div>
   </body>
 </html>

1.先引入，angularjs包，啟動的時候先是去找ng-app指令，也就指定了整個的作用域；

2.接著會繼續找到特定的指令，這裡會找到ng-model，定義了一個「text」的資料模型。

3.下面使用了text的這個模型，所以實現了雙向綁定。（只要在ng-app的作用域內，都能直接使用text）

二.如何使用控制器（controller）？

先說一下使用控制器的幾個重點：

1.不要檢視重複使用controller，一個控制器一般只負責一小塊視圖（一一對應）；

2.不要在controller中直接操作DOM，這不是控制器的職責，操作DOM要使用指令derective（見上節教學）；

3.不要在controller中進行資料過濾的操作，有專門的filter服務來實現這一塊；

4.一般來說，不同的controller之間是不互相呼叫的，控制器的互動一般透過事件進行。

接著我們來看上面程式碼藍色的部分，controll.js的內容是：

 function controller($scope){
   $scope.greeting = {
     text : 'hello'
   };
 }

angularjs找到一個ng-controller的指令，然後會找到定義這個指令的地方，就是controll.js文件，然後可以使用greeting.text直接取得到他的值。

三.如何使用視圖（view）？

說到如何使用視圖，就必須提到directive。（這裡是新的知識了喲！！！！）

以下來看一段程式碼：

var appModule = angular.module('app', []); //app是html中ng-app指令的名称

appModule.directive('hello', function() { //定义一个指令，名称叫hello
  return {
    restrict: 'E',
    template: '<div>Hi there</div>',
    replace: true
  };
});

上面的程式碼定義了一個指令標籤，你可以直接在html中試試，看看會發生什麼事吧！！！

然後我再談解每個屬性的意義：

1.restrict ：（字串）可選參數，指明指令在DOM裡面以什麼形式被宣告。取值有：E(元素),A(屬性),C(類),M(註)；上面的範例設定為元素形式（）；

2.template：（字串或函數）可選參數，傳回的內容，上面的範例回傳的是一個div；

3.templateUrl: 同上，透過url傳回內容，如果傳回內容很多，建議使用此屬性。

4.relace：（布林值），預設值為false。上面的例子設為了true：頁面使用hello標籤後會被傳回的div取代。

5.transclude：（布林值），設為true時。這個配置選項可以讓我們提取包含在指令那個元素裡面的內容，再將它放置在指令模板的特定位置，與ng-transclude合用。

6.還有一些其他屬性，具體大家再慢慢了解吧。。。

OK，以上就是對這3個主要模組的使用說明了。希望對大家的學習有幫助啦。。。如果對於上面的筆記有不懂的地方，儘管問我，我一定會給大家解答的。祝大家生活愉快！

陳述

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

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

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使用類型推斷系統，導致在相同代碼上的性能表現不同。