Angular Router - учебник для начинающих

Angular Router - это мощный и гибкий инструмент для создания одностраничных приложений (SPA) с навигацией. Он позволяет легко управлять навигацией между различными представлениями или компонентами вашего приложения без необходимости обновлять страницу.

Вот некоторые причины, по которым нам необходимо использовать Angular Router:

1. Навигация между различными представлениями: Angular Router позволяет пользователям перемещаться между различными представлениями или страницами внутри приложения. Например, нажав на ссылку в навигационном меню, пользователь может перейти на другую страницу приложения. Это очень важно для создания бесшовного пользовательского опыта.
2. помогает управлять состоянием приложения, отслеживая текущий маршрут и предоставляя доступ к параметрам маршрута. Это позволяет разработчикам создавать динамические представления, которые могут отображать различное содержимое в зависимости от текущего маршрута или параметров.Управление состоянием приложения: Angular Router также
3. Обработка пользовательского ввода: Angular Router может обрабатывать пользовательский ввод, предоставляя возможность определять маршруты, реагирующие на действия пользователя. Например, нажатие на кнопку может вызвать изменение маршрута, которое переведет пользователя на новую страницу или отобразит другой вид.
4. Оптимизация производительности приложения: Angular Router может помочь оптимизировать производительность приложения за счет "ленивой" загрузки модулей и компонентов. Это означает, что приложение загружает необходимые компоненты только тогда, когда они требуются, что позволяет сократить время первоначальной загрузки и повысить общую производительность.

В этом руководстве мы рассмотрим основы Angular Router и то, как использовать его для навигации между различными представлениями в приложении Angular.

Настройка приложения Angular

Чтобы начать, нам нужно создать новое приложение Angular. Вы можете сделать это, выполнив следующую команду в терминале:In

ng new my-app

Эта команда создаст новое приложение Angular в папке " my-app ". После завершения установки перейдите в папку проекта с помощью следующей команды:

cd my-app

Теперь вы можете открыть папку в выбранном вами редакторе кода. Я буду использовать VS Code, так как это лучший из доступных редакторов и поддерживает множество расширений для ускорения разработки. Вы также можете проверить и установить его отсюда https://code.visualstudio.com/

Добавление навигации

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

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

Мы создадим три компонента для использования в нашем приложении. Выполните следующую команду в терминале, чтобы создать компоненты:

ng generate component home
ng generate component about
ng generate component contact

Эти команды создадут три компонента, названные "home", "about" и "contact". Каждый компонент будет иметь свою собственную папку, содержащую класс компонента, HTML-шаблон и таблицу стилей CSS.

Создание навигационных ссылок

Теперь мы создадим навигационные ссылки для перехода между компонентами. Откройте файл "app.component.html" и замените существующее содержимое следующим кодом:

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/contact">Contact</a>
</nav>

<router-outlet></router-outlet>

Этот код создает навигационное меню со ссылками на компоненты "home", "about" и "contact". Атрибут routerLink используется для определения назначения каждой ссылки. Директива router-outlet используется для указания места отображения содержимого каждого компонента.

Настройка маршрутов

Теперь мы настроим маршруты для нашего приложения. Откройте файл "app-routing.module.ts" и замените существующее содержимое следующим кодом:

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

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

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

Этот код определяет маршруты для нашего приложения. Каждый маршрут определяется как объект с двумя свойствами: path и component. Свойство path определяет путь URL для маршрута, а свойство component определяет компонент, который должен отображаться при активации маршрута.

Модуль AppRoutingModule импортируется в файл "app.module.ts", как показано ниже:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ]
)}

Запуск приложения

Наконец, мы можем увидеть наш код в действии, запустив приложение:

ng serve -o

Вы должны увидеть наши три маршрута "home", "about" и "contact" в верхней части, и когда вы нажмете на них, вы должны перейти на другую страницу/вид.

Ресурсы

Надеюсь, это руководство помогло вам настроить базовую маршрутизацию в вашем приложении Angular и должно послужить отправной точкой при работе с Angular Router. Ниже приведены некоторые ресурсы, к которым вы можете обратиться, чтобы узнать больше об Angular Router:

• Angular
• Angular Маршрутизация между модулями - TekTutorialsHub
• Защита маршрутизатора * Angular