Система маршрутизации Angular 7 Система маршрутизации Angular 7 angular routing роутинг

Система маршрутизации

Open in new window

Импортируем класс роутинга в app.modules.ts.

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

Ссылка на документацию

Далее определяем массив роутов.

const appRoutes: Routes = [
  { path: 'home', component: AppComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

Вставляем роутинг в секцию imports.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Вынесем роутинг в отдельный модуль.

Создадим файл app.routing.ts.

import { Routes } from '@angular/router';
import { AppComponent } from './app.component';

export const appRoutes: Routes = [
  { path: 'home', component: AppComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

Изменим главный модуль.

import { appRoutes } from './app.routing';
import { RouterModule } from '@angular/router';
...

  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    ),
    NgbModule.forRoot()
  ],

Добавим новый компонент.

ng g component news

Подключим его в роутинг.

import { NewsComponent } from './news/news.component';

export const appRoutes: Routes = [
  { path: 'home', component: AppComponent },
  { path: 'news', component: NewsComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

Создадим ссылки на два роутинга в главном шаблоне.

  <div class="navbar navbar-dark bg-dark box-shadow">
    <div class="container d-flex justify-content-between">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <strong>Test project</strong>
      </a>
      <a  routerLink="/home">Home</a>
      <a  routerLink="/news">News</a>

    </div>
  </div>

Добавим в то место где будем выводить содержимое компонентов из роутинга.

  <div class="navbar navbar-dark bg-dark box-shadow">
    <div class="container d-flex justify-content-between">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <strong>Test project</strong>
      </a>
      <a  routerLink="/home">Home</a>
      <a  routerLink="/news">News</a>

    </div>
  </div>

  <router-outlet></router-outlet>

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

Создадим новый компонент.

ng g component news

Добавим его в роутинг.

import { Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { NewsComponent } from './news/news.component';
import { HomeComponent } from './home/home.component';

export const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'news', component: NewsComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

Изменим главный шаблон и вынесем содержимое домашней страницы из главного шаблона в шаблон компонента home.

Иногда необходимо перегружать сервер для вступления изменений в силу

routing angular

Создадим компонент для регистрации и добавим его в роутинг.

ng g component register


import { Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { NewsComponent } from './news/news.component';
import { HomeComponent } from './home/home.component';
import { RegisterComponent } from './register/register.component';

export const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'reg', component: RegisterComponent },
  { path: 'news', component: NewsComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

Добавим форму в шаблон.

https://getbootstrap.com/docs/4.0/components/forms/

angular registration form

Other topics