Привет, меня зовут Infanty, мой профиль в LinkedIn.
Я пишу how-to статьи на редкие темы или статьи обзоры - для себя и тех кто со мной работает.

Создание приложения с роутингом

Для реализации роутинга (перенаправления по ссылкам) в приложении, в его исходном коде - должен существовать файл: app-routing.module.ts (по пути: /src/app/). В этом файле реализуется обработка "базовых" путей приложения. Для активации обработки роутинга необходимо подключить данный файл в: /src/app/app.module.ts.

Для того, что бы не создавать и не подключать этот файл руками, удалим базовое приложение созданное в предшествующей статье и создадим его заново, используя дополнительные команды Angular CLI:

rm -rf ./my-shop-app/
ng new my-shop-app --routing

Дополнительная команда: "--routing" (в последней строке) - позволяет автоматически создать в приложении файл: app-routing.module и подключить его в файле: /src/app/app.module.ts.

Создание верхней и нижней шапки

Сделаем небольшое отступление от реализации главной страницы сайта - для создания верней и нижней шапки сайта, которые будут отображаться на всех страницах сайта. Для этого - создадим два компонента, которые и будут содержать реализацию вёрстки верхней и нижней шапки сайта, используя Angular CLI:

ng generate component components/header
ng generate component components/footer

Данные компоненты будут автоматически подключены в файле: /src/app/app.module.ts. Остаётся добавить HTML вёрстку шапок сайта в шаблоны компонентов: /src/app/components/header/header.component.html и /src/app/components/footer/footer.component.html. После чего добавить их вывод в файл основного шаблона приложения /src/app/app.component.html:

<app-header></app-header>
<nav>
  <a routerLink="/" routerLinkActive="active">Home</a>
  <a routerLink="/login" routerLinkActive="active">Home</a>
</nav>
<router-outlet></router-outlet>
<app-footer></app-footer>

Где:

  • в первой строке шаблона производится вывод верхней шапки сайта;
  • в третьей строке - вывод ссылки на главную страницу сайта;
  • в четвёртой строке - вывод ссылки на главную страницу сайту с формой входа;
  • в шестой строке - вывод содержимого текущего роута;
  • в седьмой строке - вывод нижней шапки сайта.

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

Создадим модуль с тремя компонентами, используя Angular CLI:

ng generate module modules/home --routing
ng generate component modules/home/components/home-page --module modules/home
ng generate component modules/home/components/home-reusable --module modules/home
ng generate component modules/home/components/home-page-login --module modules/home

Данные этого модуля (и его компонентов) будут выводиться в файл основного шаблона приложения вместо тега router-outlet, когда пользователь находится на роуте - главной страницы сайта (компонент: home-page) или главной страницы сайта с формой входа (компонент: home-page-login).

При создании модуля использована дополнительная команда Angular CLI ("--routing"), для того, что бы модуль мог содержать свою внутреннюю реализацию роутинга в файле home-routing.module.ts. Т.е. в файле app-routing.module можно связать все роуты вида "/home/что-то" с данным модулем, а в файле home-routing.module.ts связать все "конкретные" роуты вида "/home/" или "/home", "/home/login", "/home/user" и т.п. с компонентами модуля.

Внесём изменения в файл /src/app/modules/home/home-routing.module.ts для обработки роутов вида "/home/" и "/home/login"

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//  Подключение компонентов модуля отображающих данные по заданным роутам.
import { HomePageComponent } from './components/home-page/home-page.component';
import { HomePageLoginComponent } from './components/home-page-login/home-page-login.component';

// Связывание URL и компонента модуля.
const routes: Routes = [
  // Роут: "/" или "" (в зависимости от того как настроен веб-сервер).
  { path: '', component: HomePageComponent },
  // Роут: "/login".
  { path: "login", component: HomePageLoginComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

Добавим вёрстку главной страницы сайта и главной страницы сайта с формой входа - в шаблоны компонентов: /src/app/modules/home/components/home-page/home-page.component.html и /src/app/modules/home/components/home-page-login/home-page-login.component.html. При этом повторяющиеся части вёрстки этих двух страниц - поместим в шаблон компонента home-reusable и используем данный компонент в шаблонах этих двух страниц:

<!-- интеграция home-reusable в шаблон другого компонента -->
<app-home-reusable></app-home-reusable>

<!-- уникальная вёрстка для данного компонента, например: home-page-login -->
<div *ngFor="let name of ['Foo', 'Bar', 'Baz']">
  <p>Hi, my name is {{name}}. I'm a home child component.</p>
</div>

Директива ngFor позволяет перебирать в шаблоне - элементы массива. Т.е. предпоследняя строка в шаблоне будет выведена на странице 3 раза (с последовательной подстановкой значений: Foo, Bar и Baz).

Активируем "ленивую" загрузку модуля и его компонентов при посещении URL (роута) вида: "/home/что-то" . Для этого изменим содержимое файла /src/app/app-routing.module.ts:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

const routes: Routes = [
  { path: "home", loadChildren: "./modules/home/home.module#homeModule" }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

После чего приложение начнёт обрабатывать запросы к роутам вида "/home/" и "/home/login". Но в основном шаблоне приложения эти роуты заданы без использования "/home" (т.е. "/" и "/login"). Изменим значение path, для приведения роутов к виду заданному в основном шаблоне приложения:

{ path: "", loadChildren: "./modules/home/home.module#homeModule" }

Это приведёт к тому, что данные модуля home-routing будут выводится при открытии "базового" URL сайта вида: http://example.com/, а данные модуля home-routing-login будут выводится при открытии URL сайта вида: http://example.com/login.

Установим необходимые пакеты Node.js и запустим приложение набрав в консоли:

npm install
ng serve

Проверим работу приложения по URL: http://localhost:4200/.

При наличии желания - расширить знания по Angular, рекомендую сайт: https://monsterlessons.com/project/series/tur-geroev-na-angular-2.