AngularJS RequireJS Browserify i moduł JavaScript/globalny koszmar z zakresu

Question

Ostatnio trochę kopałem we wszystkich bitwach CommonJS vs AMD i to są moje wnioski ... (BTW, nie głoszę tutaj, dzielę się swoimi przemyśleniami uzyskać konstruktywne spostrzeżenia ...) RequireJS wprowadza do moich skomplikowanych modułów dużo skomplikowania, czuję się źle, ponieważ jest to moduł w module ... Sposób Browserify jest czystszy, ale aby działał poprawnie z każdym rzeczą, musisz mieć wszystkie zależności i zależności zależne od twoich potrzeb, niestety nie żyjemy w idealnym świecie ... więc musicie podpierać i podpierać wewnętrzną zależność przesłoniętego Libsa ... Nie jestem wielki fan dodatkowej złożoności ...

Sposób Jestem obecnie dzieje na (i podlegają wszystkim swojej konstruktywnej krytyki ...)

Mam plik grunt złączenie i minify wszystkich moich zasobów, libs jak BreezeJS, $, Q, Pobrać, itp .. . przecieki dotyczące zakresu globalnego ... Następnie Oświadczam ten moduł typu dla tych globalnych:

module.value('gLadda', (function(){ 

    if("Ladda" in window && "Spinner" in window){ 
     return Ladda; 
    }else{ 
     throw new Error("The Globals Ladda || Spinner are missing"); 
    } 

})()); 

Po moim app pracuję z „Angularify” zależnościami, nie wykorzystali tę technikę w zespole i zastanawiam się, czy dla niektórych jest to jakieś czerwone światełko i czy wyjaśnią dlaczego ... Dziękuję za poświęcony czas.

Answer 1

Z żądania funkcji mam dla inclusion of an AMD loader jako część dodatkowych modułów ng.

Angular jest wyposażony w funkcję umożliwiającą użytkownikom tworzenie definicji modułów i wyszukiwanie jednostek takich jak kontrolery później za pomocą identyfikatora ciągu. Kanciasty nie pochodzi z możliwością ładowania skryptów zapisane w oddzielnym pliku, co oznacza, że ​​jesteś w lewo z czterech opcji:

1. przechowywać wszystkie swoje JavaScript w jednym pliku.
2. Oddziel javascript na osobne pliki i dodaj znaczniki skryptów dla każdego pliku.
3. Użyj programu ładującego pliki AMD, takiego jak requireJS, do zarządzania plikami skryptów i ich zależnościami.
4. Użyj prekompilatora, takiego jak browserify, aby scalić pliki stylów nodejs w pojedynczy plik skryptu.

Wraz z rozwojem projektu pliki stają się trudniejsze do zarządzania, nie tylko ze względu na ich rozmiar, ale również dlatego, że zależności między modułami stają się bardziej skomplikowane. Duże projekty mogą również skorzystać z leniwego ładowania programu ładującego AMD.

Moduł ładujący AMD wyświetla listę zależności, które muszą być obecne, aby można było uruchomić ten plik. Problem polega na tym, że zależności AMD są zbliżone do listy Injection użytej przez Angular, ale nie do dokładnie tego samego. Jednym z problemów może być postrzegane w tym kodzie:

define(['angular'], function(angular) { 
    return angular.module('myApp.controllers', ['myApp.services']) 
    .controller('MyController', ['$scope', 'myService', 
     function($scope, myService) { 
     $scope.data = myService.getData(); 
     } 
    ]) 
}; 

define oświadczenie u góry mówi, aby upewnić się, że angular jest zainicjowana przed uruchomieniem tej funkcji. Instrukcja angular.module mówi, aby wyszukać "$ scope" i "myService" i wprowadzić je do zmiennych $scope i myService. Problem polega na tym, że program ładujący AMD mógł nie zainicjować pliku, który definiuje myApp.services, w którym można założyć, że jest zdefiniowany jako myService, ponieważ nie pojawił się w powyższej definicji definicji. Tworzy to ogromną rozłączność między listą wtrysku a listą zależności AMD. Nie tylko trudno jest stwierdzić, czy "myApp.usługi; został załadowany, trudno również stwierdzić, jakie konkretne komponenty są dostępne w "myApp.services". IOW Czy moja usługa jest załadowana i wstrzykiwana?

Obecnie używam opcji # 3 w postaci requirejs, ponieważ potrzebuję mieć możliwość dynamicznego ładowania kontrolerów poprzez routing (patrz pierwszy link). Również rozmiar aplikacji, z którą teraz pracuję, sprawia, że ​​przeglądanie jest niepraktyczne, ponieważ istnieje tak wiele stron. Zgadzam się jednak, że nie jest to optymalne, ale w tej chwili nie widzę innego wyboru.
Z praktycznego punktu widzenia, definiuję jeden wstrzykiwany na plik. Staram się również, aby wszystkie tablice do wstrzykiwania pasowały do ​​tablicy wymaganej. Nie jest to konieczne, ale powoduje, że kod jest łatwiejszy w utrzymaniu.

znalazłem te artykuły pomocne w pisaniu tego:

https://github.com/marcoslin/angularAMD

http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx