Jedynka strona aplikacji - plik js załadować dynamicznie w oparciu o częściowym widokiem

Question

Właśnie rozpoczął naukę kątowe i samouczka tutaj - http://docs.angularjs.org/tutorial/step_00

Mam pobrane przykład nasion z GitHub i działa świetnie. Mam jednak pytanie - jeśli częściowy widok wymaga odwołania do zewnętrznego pliku js, czy musi on zostać dodany do pliku index.html na początku? Chcę, aby aplikacja była tak szczupła, jak to tylko możliwe i chce tylko uwzględnić referencje js, które są wymagane dla obecnego widoku. Czy możliwe jest dynamiczne ładowanie plików js na podstawie widoku?

Answer 1

Myślę, że ta funkcja nie jest wbudowana w AngularJS.

Można jednak rzucić okiem na ten projekt, który oferuje podstawowy projekt użycia AngularJS z RequireJS do załadowania na żądanie wymaganych plików js.

https://github.com/tnajdek/angular-requirejs-seed

Jeśli aplikacja jest ogromny, może to być przydatne, w przeciwnym razie może to być przesadą, ponieważ sam fakt korzystania angularjs zmniejszyć ilość kodu do napisania. Osobiście ładuję wszystkie niezbędne skrypty na początku.

Mają również spojrzeć na ten post z Briant Forda (który działa na angularjs w Google) o zarabianie ogromnych Apps:

http://briantford.com/blog/huuuuuge-angular-apps.html

Answer 2

naprawdę złamał zdanie na ten jeden. To taki ból, że leniwe ładowanie nie jest obsługiwane domyślnie w angularjs. Zresztą tu są dwa linki, które pomogły mi go rozwiązać:

http://ify.io/lazy-loading-in-angularjs/

http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm

Answer 3

To właśnie pracował dla mnie. Pomyślałem, że zamieściłbym go dla każdego, kto szuka najlżejszego rozwiązania.

Mam kontroler najwyższego poziomu na znaczniku HTML strony i dodatkowy kontroler dla każdego widoku częściowego.

W regulatorze najwyższego poziomu I zdefiniowanego następującą funkcję ...

$scope.loadScript = function(url, type, charset) { 
    if (type===undefined) type = 'text/javascript'; 
    if (url) { 
     var script = document.querySelector("script[src*='"+url+"']"); 
     if (!script) { 
      var heads = document.getElementsByTagName("head"); 
      if (heads && heads.length) { 
       var head = heads[0]; 
       if (head) { 
        script = document.createElement('script'); 
        script.setAttribute('src', url); 
        script.setAttribute('type', type); 
        if (charset) script.setAttribute('charset', charset); 
        head.appendChild(script); 
       } 
      } 
     } 
     return script; 
    } 
}; 

Więc wtórnych kontrolerów mogę załadować potrzebne skrypty z połączenia jak poniżej ...

$scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8'); 

Jest niewielkie opóźnienie, zanim obiekty zawarte w skrypcie zewnętrznym będą dostępne, więc przed ich użyciem musisz zweryfikować ich istnienie.

Mam nadzieję, że ktoś zaoszczędził trochę czasu.

Answer 4

Właśnie wypróbowałem https://oclazyload.readme.io/. Działa po wyjęciu z pudełka.

bower install oclazyload --save 

załadować go w module i wstrzyknąć wymaganą moduł kontrolera:

var myModule = angular.module('myModule', ['oc.lazyLoad']) 
    .controller('myController', ['$scope', '$ocLazyLoad', '$injector', 

     function($scope, $ocLazyLoad, $injector) { 
      $ocLazyLoad.load(
        ['myExtraModule.js', 
         'orAnyOtherBowerLibraryCopiedToPublicFolder.js' 
        ]) 
       .then(function() { 
        // Inject the loaded module 
        var myExraModule = $injector.get('myExtraModule'); 
       }); 
     } 
    ]);