2016-12-26 222 views
2

我有以下代碼:AngularJS依賴注入 - 混淆語法

<!doctype html> 
<html> 
<body> 
    <div ng-controller="MyController"> 
    Hello {{greetMe}}! 
    </div> 
    <script src="http://code.angularjs.org/snapshot/angular.js"></script> 

    <script> 
    angular.module('myApp', []) 
     .controller('MyController', ['$scope', function ($scope) { 
     $scope.greetMe = 'World'; 
     }]); 

    angular.element(function() { 
     angular.bootstrap(document, ['myApp']); 
    }); 
    </script> 
</body> 
</html> 

從網站:https://docs.angularjs.org/guide/bootstrap

我實在無法理解怎麼語法的工作,特別是

angular.module('myApp', []) 
      .controller('MyController', ['$scope', function ($scope) { 
      $scope.greetMe = 'World'; 
      }]); 

上面醜陋的語法是什麼意思? 'MyController'的作用是什麼?數組參數意味着什麼? $ scope是什麼意思?誰在調用「函數($ scope)」?

它是如何工作的? angular.bootstrap(document,['myApp']);

何時注入上面的參數['myApp'],以及如何?

該網站沒有解釋有關語法的任何內容。只是假設讀者知道這一切。

請幫忙。

+0

我想你可能已經開始「從book_中間_reading」。要鏈接的頁面是手動自舉角的指南。這是某人已經熟悉角的高級主題。我建議你開始從一個實際的教程,帶你完成的意義和語法增量學習。 –

回答

1

Angular的依賴注入「串化」函數,然後從字符串中提取參數名稱,並使用它來查找相關服務。

然而,當你縮小代碼時,這些參數因爲「g」,「e」等等。既然Angular現在不知道你真正想要什麼服務,它們提供了兩種明確描述你的依賴關係的方法。

第一種方法是將數組中的最後一個參數作爲參數的原始名稱提供給函數/類。

另一種方法是通過您的原函數/類,而是分配一個「靜態」 $注入性函數本身。該屬性被賦予一個表示原始參數名稱的字符串數組的值。

最後,提供給angular.controller/service/factory/etc的第一個參數是您將要應用到正在註冊的服務的名稱。這是其他服務將用來聲明它們對您的控制器/服務的依賴關係的字符串。

在您的示例中,「myApp」是一個模塊。模塊不是作爲依賴注入的,而是一種打包一組服務(控制器,指令)的方式。沒有首先通過將模塊以angular.module第二參數傳遞的陣列的名稱聲明模塊的依賴關係不能注入來自不同模塊的服務。 angular.bootstrap允許一個模塊(以及它的依賴)與一個dom節點一起工作。

0

可能低於解釋給你明確的認識

angular.module(「對myApp」,[])

該行創建模塊變量(在這種情況下,對myApp),我們將在HTML中使用頁來引導從所述元件的應用程序中使用以下代碼

角線指定

或者通過自舉猻。自舉(文件,[ '對myApp']);

或通過加入到其中,我們要使用角任何元件

$範圍對於兩個視圖和控制器的應用對象和可用包含模型數據

納克-controller指令將允許使用指定的控制器(本例中NG-控制器= 「myController的」)

一個模塊可以具有多個控制器和每個控制器將具有其自己相關聯的$範圍對象和構造函數模型屬性和功能是相關聯的範圍內限定。

角度依賴注入功能將有助於消耗單獨創建的組件,從而使這些組件可重用,可維護和可測試。

下面的文章依賴注入將提供更深入的 http://anandmanisankar.com/posts/angularjs-dependency-injection-demystified/

希望這有助於您