Маршрутизация в Angular 7: основы

Маршрутизация в Angular — одна из наиболее распространенных реализаций, которая потребуется любому приложению angular, чтобы сделать его пригодным для использования. В этом упражнении мы разобьем все на простые строительные блоки и дадим вам маршрут!

Мы рассмотрим следующие темы:

Базовая маршрутизация между компонентами
Создание дочерних компонентов
Размещение роутера-розетки

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {HomeComponent} from './home/home.component';
import {ContactComponent} from './contact/contact.component';
import {MatButtonModule, MatToolbarModule} from '@angular/material';
import {RouterModule} from '@angular/router';

@NgModule({
    declarations: [

        AppComponent,
        HomeComponent,
        ContactComponent

    ],
    imports: [

        BrowserModule,

        MatToolbarModule,
        MatButtonModule,

        RouterModule.forRoot([

            {

                path: 'home',
                component: HomeComponent

            }, {

                path: 'contact',
                component: ContactComponent

            }

        ])

    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}