Маршрутизация Angular 2 — как реализовать для моей структуры

В интересах самообучения и совершенствования своих навыков программирования я создаю приложение с использованием .NET Core и Angular 2.

Основываясь на том, что я прочитал до сих пор, я структурировал свое приложение NG2 следующим образом (я не включил все файлы)...

/wwwroot
  - index.html
  - /app
    - app.module.ts
    - app.component.ts
    - app.component.html
    - app.route.ts
    - main.ts
    - /Components
      - /Home
        - home.module.ts
        - home.component.ts
        - home.component.html
        - /Dashboard
          - dashboard.module.ts
          - dashboard.component.ts
          - dashboard.component.html
      - /Nav
        - nav.module.ts
        - nav.component.ts
        - nav.component.html
      - /Scheduler
        - scheduler.module.ts
        - scheduler.component.ts
        - scheduler.component.html
        - /Calendar
          - calendar.module.ts
          - calendar.component.ts
          - calendar.component.html
        - /Appointment
          - appointment.module.ts
          - appointment.component.ts
          - appointment.component.html

Я читал, что рекомендуется, чтобы каждый компонент/функция имел свой собственный модуль. Это то же самое для маршрутов? То есть должен ли каждый компонент/функция иметь собственный файл маршрута?

Я также искал везде, чтобы найти, как реализовать маршрутизацию. Я пытаюсь добиться того, чтобы компонент NAV отображался в верхней части страницы (с выделенным выбранным параметром), а затем в теле отображался выбранный компонент (например, «Главная», «Планировщик» и т. д.). Компонент «Планировщик» также может иметь систему подменю/вкладок, которая позволит мне сначала загрузить календарь (в качестве представления по умолчанию) или любой другой компонент в компоненте «Планировщик».

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

Заранее спасибо.


angular angular2-routing
person Dazfl    schedule 30.01.2017    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Поэтому после долгих проб и ошибок я бросил все, что делал, и начал с нуля. На этот раз я создал свое приложение Angular 2 с помощью инструмента Angular 2 CLI. Затем я настроил маршрутизацию, просмотрев примеры с https://school.scotch.io/routing-angular-2-applications/ и https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html (спасибо комментатору Максу Карповцу)

Используя инструмент CLI, было очень просто создать необходимые компоненты и правильно их скомпилировать. Мне нужно было только добавить файлы маршрута и модуля вручную.

person Dazfl    schedule 04.02.2017

arrow_upward
0
arrow_downward

Я думаю, что то, как вы организовали свое приложение, не соответствует передовой практике. Вам не нужно создавать специальные модули для Календаря, Назначения... Просто прикрепите эти компоненты к модулю Планировщика.

https://angular.io/docs/ts/latest/guide/ngmodule.html, чтобы помочь вам получить представление о том, как организовать ваше приложение с лучшей структурой и модульностью:

person Faly    schedule 30.01.2017
comment
Я вижу, что ты говоришь. Я еще раз просмотрел руководство по стилю (angular.io/docs /ts/latest/guide/style-guide.html) и да, возможно, я переборщил с файлами модулей. Но понадобятся ли мне эти файлы модулей для настройки маршрутизации (главный мой вопрос)? - person Dazfl; 31.01.2017
comment
Нет, вам не нужен файл модуля для каждого компонента, чтобы настроить маршрутизацию: смотрите пример кризисного модуля по ссылке, которую я дал выше. - person Faly; 31.01.2017

arrow_upward
0
arrow_downward

Это зависит от того, нужна ли вам ленивая загрузка или нет.

Если нет: он должен быть в одном файле.

Если вам это нужно:

Основная маршрутизация:

const routes: Routes = [
  { path: '', redirectTo: 'eager', pathMatch: 'full' },
  { path: 'eager', component: EagerComponent },
  { path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }
];

И маршрутизация лениво загруженного компонента:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LazyComponent } from './lazy.component';

const routes: Routes = [
  { path: '', component: LazyComponent }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

Для получения дополнительной информации проверьте этот учебник:

https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

person Max K    schedule 31.01.2017