Strukturyzacja aplikacji AngularJS

Jestem całkowicie nowicjuszem w używaniu AngularJs i chociaż przejrzałem samouczki, nadal mam mnóstwo pytań bez odpowiedzi w głowie. Moim głównym problemem w tej chwili jest to, jak podzielić aplikację na moduły ?

Zasadniczo muszę zbudować aplikację, która będzie działać jako portal do różnych aplikacji, z których każda reprezentuje funkcjonalność biznesową(czasami z niewielkimi lub żadnymi relacjami ze sobą).

W samouczku pokazują, jak utworzyć jedną aplikację z wieloma widoki. To, czego potrzebuję, to jedna aplikacja z wieloma modułami, każdy moduł ma własne widoki (i prawdopodobnie będę miał wspólne widoki też).

Czy ktoś pracował nad aplikacją o takiej strukturze ? Czy mógłbyś podzielić się swoim doświadczeniem i sposobem zorganizowania rzeczy ?

The AngularJS Seed project ( https://github.com/angular/angular-seed ) jest dobry, ale tak naprawdę nie pokazuje, jak zbudować złożoną aplikację.

Author: Sam, 2013-04-11
Source

5 answers

[EDIT] Napisałem artykuł na moim blogu, aby wyjaśnić rzeczy bardziej szczegółowo:

Czytaj dalej sam-dev.net i możesz teraz przeczytać część II , z próbką kodu.

Odpowiem na własne pytanie. Nie dlatego, że uważam, że to najlepsze podejście, ale dlatego, że zdecydowałem się na to.

W ten sposób podzieliłem moje Moduły biznesowe na foldery

  • app
    • biznesmodule
      • Kontrolery
        • indeks.js
        • firstCtrl.js
        • secondCtrl.js
      • dyrektywy
      • usługi
      • views
      • filtry
    • anotherBusinessModule
    • dzielone
    • app.js
    • indeks.html

Każdy moduł ma własną strukturę folderów dla kontrolerów, dyrektyw itp...

Każdy folder ma indeks.plik js, a następnie inne pliki do oddzielenia każdego kontrolera, każdej dyrektywy itp...

Indeks.plik js zawiera definicję modułu. Na przykład dla kontrolerów businessModule powyżej: 

angular.module('myCompany.businessModule.controllers', []);
Nie ma tu żadnych zależności, ale mogą istnieć.

Następnie w firstCtrl.js, mogę ponownie użyć tego modułu i dodać do niego kontroler: 

angular.module('myCompany.businessModule.controllers').controller('firstCtrl',     

        function(){
});

Następnie aplikacja.js agreguje wszystkie moduły, które chcę dla mojej aplikacji, dodając je do tablica zależności.

 angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule']);

Folder udostępniony zawiera dyrektywy i inne rzeczy, które nie są specyficzne dla modułu biznesowego i które mogą być ponownie użyte w dowolnym miejscu.

Nie wiem, czy to najlepsze podejście, ale na pewno działa. Może to zainspiruje innych ludzi.

EDIT

Jako indeks.Pliki JS zawierają deklaracje modułów, muszą być odwołane na stronie html przed innymi skryptami aplikacji. Aby to zrobić, użyłem IBundleOrderer of ASP.NET MVC 4: 

 var bundle = new ScriptBundle("~/bundles/app") { Orderer = new AsIsBundleOrderer() };
 bundles.Add(bundle.IncludeDirectory("~/app", "*.js", true));

public class AsIsBundleOrderer : IBundleOrderer
{
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        files = files.OrderBy(x => x.Name == "index.js" ? 0 : 1);
        return files;
    }
}
 31
Author: Sam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-26 12:40:52

Metoda sama wydaje się być drogą w większości przypadków. Aktualna dokumentacja kątowa ma go skonfigurować jako moduł dla każdego kontrolera, usługi itp., ale zaprzeczył temu sam Miško z google.

W ostatnim najlepsze praktyki Angularjs wideo Miško pokazuje, w jaki sposób można rozplanować strukturę modułów w celu łatwego testowania i łatwego skalowania. Należy pamiętać, jak struktura modułów nie ma wpływać na wydajność w ramach angular app.

Od tworzenia aplikacji angular, sugerowałbym stosowanie metody najlepszych praktyk z wyżej wymienionych powodów. Możesz chcieć utworzyć własny skrypt węzła do generowania kontrolerów, itp. na razie, który może zawierać powiedzmy moduł, w którym chcesz utworzyć kontroler i nazwę, która następnie automatycznie wygeneruje twój kontroler i właściwe stworzenie specyfikacji testowej.

Jeśli chcesz dobrze przeczytać o konfiguracji jest doskonały post tutaj jeśli chodzi o konfigurację projektu w oparciu o to, gdzie myślisz, że będzie zmierzał.

 11
Author: Ryan Q,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-25 08:20:44

Powinieneś iść do yeoman https://github.com/yeoman/yeoman i struktura generatora yeoman: https://github.com/yeoman/generator-angular , staje się lepszym rozwiązaniem do konfiguracji aplikacji niż angular-seed. Dla różnych modułów biznesowych należy utworzyć różne aplikacje i udostępnić usługi oraz dyrektywy

 3
Author: Stéphane Busso,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-11 09:39:20

Dla zainteresowanych przygotowałem "modularną" wersję Angular Seed, która lepiej pasuje do najlepszych praktyk Misko: https://github.com/sanfordredlich/angular-brunch-seed-modularized

Jest skonfigurowany z brunchem, dzięki czemu bardzo szybko ładujesz stronę, testujesz działanie i wiele więcej. Możesz szybko się rozwijać, a jeśli zastosujesz się do wzorców w kodzie, Twoja aplikacja powinna być odpowiednio skalowana. Smacznego!

 2
Author: Sanford Redlich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-04 06:19:29

Ściągnięcie, które znalazłem do podejścia yeoman generator przyjmuje jest to, że tak naprawdę nie składa się z modułów kątowych, więc nie czuje się zbyt spójny dla mnie. Tak więc, jak projekt staje się większy i pracujesz nad konkretnym komponentem znalazłem się przerzucanie wokół dużo w drzewie źródeł.

Ostatnio natknąłem się na inne podejście tutaj . Takie podejście grupuje pliki według modułów kątowych i wydaje mi się bardziej spójne. Jedną z możliwych wad tego czy fakt, że jesteś zobowiązany do zbudowania witryny, nie możesz po prostu uruchomić jej na miejscu. Zadanie grunt watch w tym projekcie pomaga w tym.

 1
Author: rgaskill,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-12 03:01:31