angularJSの段階的な手動ブートストラップの理解

Question

私は手動でブートストラップされた方法について、angularJSの基本を調べていました。私は異なったアプローチを見つけ、this approachが最も適していることを発見しました。

angular.element(document).ready(function(){ 
    angular.bootstrap(document,['myapp']) 
}) 

さらに移動すると、this another way which breaks it to basicsに出くわしました。私は自分の理解ごとにコードをコメントしましたが、誰かが私のところに物事がどのように働いているかについて詳しく説明してください。

window.onload = function(){ 

    var $rootElement = angular.element(window.document); 
    var modules = [ 
    'ng',  // angular module 
    'myApp', // custom module 
    // what are we trying to achieve here? 
    function($provide){ 
     $provide.value('$rootElement',$rootElement) 
    } 
    ]; 

    var $injector = angular.injector(modules);  // one injector per application 
    var $compile = $injector.get('$compile');  // Compile Service: it traverses the DOM and look for directives and compile and return linking function. No accecess to scope 
    var compositeLinkFn = $compile($rootElement); // collection of all linking function. Here scope is getting accessed 

    var $rootScope = $injector.get('$rootScope'); // Hold of the rootscope 
    compositeLinkFn($rootScope); 

    $rootScope.$apply(); 
} 

さらに詳しい方法と改善点を提案することで、このトピックについてもっと教えてください。

Answer 1

私たちはここで達成しようとしていますか？我々はangularjsでどこでも使用するのと同じ古い依存性注入ある

var modules = [ 
    'ng',  // angular module 
    'myApp', // custom module 
    function($provide){ 
     $provide.value('$rootElement',$rootElement) 
    } 
    ]; 

。 ここにモジュールngを注入し、それにvalueを登録しています。

そして最後に、我々はangular.injector（）

var $injector = angular.injector(modules) 

まだ

ない確信にそれを渡していますか？ここでは簡単なバージョン（我々はコントローラでDIを使用する方法）

var $injector = angular.injector(['ng','myApp',function($provide){ 
    $provide.value('$rootElement',$rootElement) 
}]) 

は今二つの質問、

1. だ、なぜ私たちはangular.injectorを使用していますか？

   angular.injectorは、サービスの取得と依存性注入のために使用できるインジェクタオブジェクトを作成するためです。私たちは、は$でそのテンプレートをバインドするサービスと範囲のインスタンスをコンパイル取得するには、このが必要になります。

2. $rootElementはなぜ設定されていますか？アプリケーションのルート要素を角度知っているように

   。 angular.bootstrap(document,['myapp'])にdocumentを使用していることがわかりましたか？同じ理由があります。 official documentation of $rootElementによると

   、

   $ rootElementはngAppが宣言された要素またはangular.bootstrapに渡さ 要素のいずれかです。

   ng-appも標準のangular.bootstrapも使用していないため、手動で設定する必要があります。

次に、私たちはちょうどステップ上から受け取ったインジェクタのインスタンスから$compileサービスを取得しよう。

var $compile = $injector.get('$compile'); 

$ compileサービスは、コンパイルに使用するサービスです。あなたが特定の範囲（角度は連結機能を呼ぶもの）再び

に対してマークアップをバインドするために使用できる機能を生成しますマークアップに対してコンパイル$起動すると、範囲を得るために、我々は$injector.get('$rootScope')使用して、それを渡します$ compileから得たリンク関数を複合するために。

angular.bootstrap(document,[myApp])は、上記の手順の単なる構文上の砂糖です。これは、インジェクタインスタンスを作成し、関連サービスを設定し、アプリケーション全体のスコープを作成し、最後にテンプレートをコンパイルします。

これは、official documentation for angular.bootstrapから明らかです。明らかに、インジェクタインスタンスを返します。我々は、アプリケーション・モジュールの名前を提供こと

同じ話がofficial bootstrap guide

注記に表示され、このアプリのために新たに作成されたインジェクタを返し

オート。$インジェクタインジェクタに をロードするために、角度。ブートストラップの第2パラメータとしてを入力してください。 機能。 angular.bootstrapは のフライでモジュールを作成しないことに注意してください。カスタムモジュールを作成してから、 パラメータとして渡す必要があります。最後に

、これは HTML-ドキュメントがロードされ、DOMの準備が完了した後を行う必要がありsay..allまでも無く。

EDIT

は、ここでは、このプロセスの概略図です。 angular.bootstrap process http://www.dotnet-tricks.com/Content/images/angularjs/bootstrap.png Image Reference

ことができます:)