Правильная угловая архитектура 6 в ASP.NET Framework - PullRequest
Новая
       14

Правильная угловая архитектура 6 в ASP.NET Framework

0 голосов
/ 03 октября 2018

У меня есть приложение .NET Framework: ASP.NET MVC (4.6.1).Он содержит типичные контроллеры и .cshtml представления.

Теперь мы собираемся ввести angular 6 (до того, как у нас были angularjs на небольшом количестве страниц).Поэтому мне интересно, как лучше всего использовать модульную архитектуру angular без необходимости переделывать каждый вид в данный момент.

В идеале (в угловом / внешнем виде) ваше приложение полностью маршрутизируется через angular и больше не имеет cshtml, а всего лишь Home.cshtml, который загружает angular-приложение.

Но из-за размера приложения и объема работы, необходимой для переделки всего, я пытаюсь найти лучший способ объединить обе технологии (что также может иметь некоторые преимущества?) И медленно перемещать страницы вangular 6 один за другим.

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

Насколько я понимаю: каждый созданный модуль может иметь только один компонент начальной загрузки.Значит, мне нужно было бы создать модуль для каждой cshtml страницы?

С этими знаниями я придумал следующую архитектуру:

enter image description here

Так что это для 1 «раздела» в приложении.Везде, где новый раздел требует функциональности, которая может быть выполнена с помощью angular, я делал бы то же самое.Таким образом, маршрутизация выполняется MVC, а не в угловых компонентах.

Я на правильном пути?Это лучший путь?Или я упускаю что-то важное, что могло бы работать намного лучше?

Теперь мне интересно: как мне правильно реструктурировать main.ts, который на данный момент содержит: 

import { AppModule } from './app/app.module';
import { ContactplanListModule } from './app/contactplan/contactplan-list/contactplan-list.module';
import { ContactplanDetailsModule } from './app/contactplan/contactplan-details/contactplan-details.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

platformBrowserDynamic().bootstrapModule(ContactplanListModule)
    .catch(err => console.log(err));

platformBrowserDynamic().bootstrapModule(ContactplanDetailsModule)
    .catch(err => console.log(err));

Конечноэто теперь просто загрузит все модули, когда я включу dist/main.js.Это хорошо в начале, но мне интересно, можно ли это легко разделить на части.

Я думал о том, чтобы сделать что-то подобное, я просто наткнулся на это, потому что жаловался, что другие 2 модуля не было в HTML .Это работает, но я думаю, что все по-прежнему объединено в одном и том же .js файле? 

if (window.location.pathname.toLowerCase().includes("contactplans/index") || window.location.pathname.toLowerCase().endsWith("contactplans")) {
    platformBrowserDynamic().bootstrapModule(ContactplanListModule)
        .catch(err => console.log(err));
} else if (window.location.pathname.toLowerCase().includes("Contactplans/details") || window.location.pathname.toLowerCase().includes("contactplans/create")) {
    platformBrowserDynamic().bootstrapModule(ContactplanDetailsModule)
        .catch(err => console.log(err));
} else {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.log(err));

}

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

1 Ответ

0 голосов
/ 03 октября 2018

Я не знаком с ASP.NET, однако думаю, что ваш вопрос не относится к конкретной серверной технологии.

Как вы, возможно, уже поняли, каждый раз, когда вы переходите от "страница, «обслуживаемая вашим приложением ASP.NET на странице Angular», вы будете загружать приложение Angular, и каждый раз, когда вы будете перенаправлять приложение Angular на страницу ASP.NET, приложение Angular будет выгружено.

Тем не менее, вероятно, лучший способ справиться с этим - создать то, что обычно называют «оболочкой» Angular-приложения, которое загружает только корневой модуль с маршрутизатором.Затем вы создаете один модуль для каждой логической «страницы» и загружаете все эти модули лениво.

Таким образом, каждый раз, когда вы маршрутизируете из ASP.NET в Angular, загружается очень маленький корневой модуль изагружается, а затем, в зависимости от маршрута, загружается один «функциональный модуль», соответствующий логической «странице», а все остальные модули не загружаются (если вы впоследствии не направите их к ним).

Byнастроив маршрутизатор для динамической (ленивой) загрузки всех «страничных» модулей, вы можете избавиться от всего кода начальной загрузки, который у вас есть в вашем вопросе.Angular сделает все это за вас, установив маршруты к модулям как ленивые.

...