Zrozumienie krokowego ręcznego ładowania początkowego angularJS

Question

Przeszedłem przez podstawy angularJS o tym, jak to jest ręcznie ładowane. Natknąłem się na inne podejście i uznałem, że najlepiej pasuje do niego this approach.

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

Idąc dalej, natknąłem się na this another way which breaks it to basics. Skomentowałem kod zgodnie z moim zrozumieniem, ale ktoś może mi wyjaśnić więcej szczegółów na temat tego, jak działa pod maską.

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(); 
} 

Ponadto, proszę o więcej informacji na ten temat, sugerując więcej sposobów i ulepszeń.

Answer 1

co staramy się tutaj osiągnąć?

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

To samo stare zależność wtrysku używamy wszędzie w angularjs. Tutaj wstawiamy moduł ng i rejestrujemy w nim value.

I wreszcie mijamy go w angular.injector()

var $injector = angular.injector(modules) 

nie

przekonany? Oto prostsza wersja (sposób używamy DI w sterownikach)

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

Teraz dwa pytania,

1. dlaczego używamy angular.injector?

   Ponieważ, angular.injector tworzy obiekt wtryskiwacza, który może być używany do pobierania usług, jak również do iniekcji zależności. Potrzebujemy tego, aby uzyskać $ kompilację i instancję o zakresie, aby związać ten szablon z.

2. dlaczego ustawiamy $rootElement?

   Aby pozwolić kątowi znać główny element aplikacji. Zauważyłeś użycie document w angular.bootstrap(document,['myapp'])? To z tego samego powodu.

   Według official documentation of $rootElement,

   $ rootElement jest albo element gdzie ngApp został uznany lub element przeszedł do angular.bootstrap.

   Ponieważ nie używamy ani aplikacji ng, ani standardowej metody angular.bootstrap, musimy ustawić to ręcznie.

Następnie staramy się $compile usługę z instancją wtryskiwacza Właśnie otrzymaliśmy od góry kroku.

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

Usługa $ compile jest usługą do kompilacji. Wywoływanie $ skompilować przeciwko znaczników będzie produkować funkcji można użyć do wiązania znaczników przeciwko konkretnym zakresu (co kątowe wywołuje funkcję łączącą)

Ponownie, aby uzyskać zakres używamy $injector.get('$rootScope') i przekazać je na do funkcji łącza złożonego, którą otrzymaliśmy od $ compile.

angular.bootstrap(document,[myApp]) to tylko syntaktyczny cukier we wspomnianych wyżej krokach. Tworzy instancję wtryskiwacza, ustawia odpowiednie usługi za jej pomocą, tworzy zakres aplikacji i kompiluje szablon.

Jest to oczywiste z official documentation for angular.bootstrap, które wyraźnie wspomina, że ​​zwraca instancję wtryskiwacza.

auto. $ Wtryskiwacz Zwraca nowo utworzonego wtryskiwacz dla tej aplikacji

sama historia jest wskazany w official bootstrap guide

Zauważ, że Zapewniliśmy nazwę naszego modułu aplikacji do załadowania do wtryskiwaczajako drugi parametr zestawu kątowego.bootstrap funkcja. Należy zauważyć, że funkcja angle.bootstrap nie tworzy modułów w locie . Przed przekazaniem ich jako parametru należy utworzyć dowolne niestandardowe moduły.

Wreszcie trzeba dodawać say..all to musi być zrobione po HTML-Dokument jest załadowany i DOM jest gotowy.

EDIT

Oto schematyczne przedstawienie tego procesu. angular.bootstrap process http://www.dotnet-tricks.com/Content/images/angularjs/bootstrap.png Image Reference

Nadzieja to pomaga :)