Архитектура модуля AngularJS

Question

Я планирую создать несколько модулей в приложении моей компании, и у меня возникли проблемы с проектированием архитектуры для модулей. Я провел исследования, и кажется, что либо вы должны использовать один модуль на странице, либо создать «главный» модуль, который зависит от всех ваших других модулей. Мне не нравится этот подход, потому что это означает, что я должен загружать весь javascript для каждого аспекта моего приложения для каждой отдельной страницы. Это кажется по своей сути неправильным, но я также не могу понять, как обращаться с ним по-другому, если мне нужно использовать один модуль в нескольких местах на странице. Например, у меня есть членский модуль, который у меня есть, и я привязываюсь к разделу заголовка моей веб-страницы. Это будет предназначено для входа в систему, регистрации и выполнения рабочего процесса типа «забытый пароль».

На другой странице, посвященной изменению пароля (со ссылкой на сброс), заголовок также присутствует, но я хочу включить функцию сброса пароля в модуле членства. Я читал, что одна методология проектирования вашего приложения - это функциональность/функция. Я полагал, что членство было подходящим применением этого, но теперь я не уверен, так как у меня возникают проблемы с применением модуля членства более одного раза на любой конкретной странице.

Я нахожусь на правильном пути или есть предпочтительный метод для этого? Должен ли я иметь отдельный модуль для заголовка и один для остальной части страницы? Должен ли я просто укусить пулю и загрузить все? (Надеюсь, нет ...)

Следует также отметить, что это приложение ASP.Net MVC, в котором мы все еще в значительной степени полагаемся на MVC для просмотра представлений и частичных представлений. Поэтому я хотел использовать секцию javascript рендеринга для динамической загрузки только необходимого для этой страницы JavaScript. Это фарс?

<header ng-app="membership"> 
    //stuff for header membership functions 
</header> 

<div ng-app="membership"> 
    //somewhere else that needs membership, outside of header 
</div> 

Answer 1

Мне лично нравится Мини ООР(элеваторы) вместо полного SPA. Вы можете посмотреть Miguel A Castro's video и скачать источник на свой website.

Что он делает, когда приходит запрос, он сначала переходит к ASP.Net MVC Route. Затем Угловой маршрут берет на себя все остальное. Это очень гладкая конструкция.

FYI: Угловые 2 находится прямо за углом, так что я пошел вперед и обновил те, Угловое 1.5 Compotent, так что я могу преобразовать в угловой-легко позже.

Если вы хотите, вы можете остановиться там. Я пошел на один шаг вперед и использовал сильно типизированные представления с использованием подхода Matt Honeycutt's Building Strongly-typed AngularJS Apps with ASP.NET MVC 5.

Затем я применил Угловые помощники, как Axel Zarate's ANGULAR.NET – HELPERS FOR ASP .NET MVC 4.

Answer 2

В угловом приложении, поскольку это одностраничное приложение, да, все ваши javascript должны быть загружены. Это код вашего приложения, и это необходимо. Это делается только один раз при загрузке первой страницы. Вы всегда на одной странице, но в другом состоянии.

Один хороший подход - определить главный модуль, который включает в себя все остальные модули. Эти модули могут также включать в себя другие «вспомогательные модули», в которых они нуждаются.

angular.module('App', [ 
    'App.Membership' 
    // ... 
    // All others modules you need, including 3rd party modules 
]) 

Затем на каждом модуле, вы можете определить различные состояния, связанные и их контроллер

angular.module('App.Membership', [ 
    // Module dependencies 
]) 
.config(['$stateProvider', function($stateProvider) { 

    //State definition 
    $stateProvider.state('membership', { 
    parent: 'app', 
    url: '/member', 
    controller: 'MembershipCtrl', 
    template: '<ui-view/>' 
    }); 
}]); 

Вы можете также добавить глобальный контроллер для обработки элементов, которые всегда присутствуют, как заголовок.

Надеется, что это помогает