Для роутинга в Angular можно использовать Angular Router, который позволяет определить различные маршруты для разных групп страниц.
Перед тем как начать, убедитесь, что у вас установлен Angular CLI и создан проект Angular. Если вы еще не создали проект, выполните команду ng new my-app для создания нового проекта.
1. Создайте компоненты для каждой группы страниц.
В папке src/app создайте отдельную папку для каждой группы страниц, например group1 и group2. Затем в каждой папке создайте компоненты для страниц группы, например Group1Component и Group2Component. Вы можете использовать Angular CLI для создания компонентов с помощью команды ng generate component group1/Group1 и ng generate component group2/Group2.
2. Определите маршруты для каждой группы страниц.
В файле src/app/app-routing.module.ts добавьте импорт компонентов и определите маршруты для каждой группы страниц. Например:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Group1Component } from './group1/group1.component';
import { Group2Component } from './group2/group2.component';
const routes: Routes = [
{ path: 'group1', component: Group1Component },
{ path: 'group2', component: Group2Component },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
В этом примере определены два маршрута: /group1 и /group2, которые относятся к компонентам Group1Component и Group2Component соответственно.
3. Добавьте роутер в модуль приложения.
В файле src/app/app.module.ts импортируйте AppRoutingModule и добавьте его в список импортированных модулей:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule // добавляем AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
4. Используйте router-outlet для отображения маршрутов.
В файле src/app/app.component.html разместите тег router-outlet, который будет отображать компоненты для соответствующих маршрутов:
<router-outlet></router-outlet>
Теперь ваши компоненты Group1Component и Group2Component будут отображаться в этом месте в зависимости от выбранного маршрута.
5. Тестируйте приложение.
Запустите ваше приложение с помощью команды ng serve. После этого вы можете перейти по адресу http://localhost:4200/group1 или http://localhost:4200/group2, чтобы увидеть соответствующие страницы для каждой группы.
Таким образом, вы настроили маршрутизацию для разных групп страниц в Angular с использованием Angular Router. Вы можете добавить больше групп страниц и настраивать маршруты для них соответствующим образом, следуя тем же принципам.