Когато стартираме Angular приложение и го обслужваме на номер на порт, да речем ( 4200 ), нашето приложение работи на http://localhost:4200

Това е единственият път, който нашият браузър разбира и следователно не може да обслужва различни дестинации по различни пътища, като например http://localhost:4200/items. Но какво ще стане, ако имаме няколко пътя в едно и също приложение?

Как можем да решим този проблем?

Е, нека направим малко измама :). Ами ако можем да кажем на нашия браузър всички дестинации и всички пътища за достигане до тях първоначално? Проблемът ще бъде решен, защото сега браузърът ще знае всичко първоначално.

Това е мястото, където Javascript Router влиза в действие. Улеснява живота ни, като променя дестинацията винаги, когато пътят се промени. От техническа гледна точка, чрез промяна на състоянието на приложението всеки път, когато URL адресът на браузъра се промении обратно.

Тези маршрутизатори са написани в определени Javascript Frameworks и за Angular го пакетираме като @angular/router

@angular/router съдържа показаните термини:

  1. Услуга:Това е глобална услуга, присъстваща в приложението Angular.
  2. Състояние:Състоянието на рутера се поддържа от състоянието на рутера.
  3. Конфигурация: Поддържа информация за всички състояния на маршрутизиране, които присъстват в приложението.
  4. Пазач:Това е код, който се изпълнява всеки път, когато рутерът е активиран, деактивиран или зареден.
  5. Моментна снимка: Ще предостави достъп до състояние и данни за конкретен възел на маршрута.
  6. Разрешител:Скриптът, който ще извлече данни, преди да бъде стартирана заявената страница.
  7. Изход: Това е местоположението в DOM за изхода на рутера за поставяне на неговите компоненти.

Не се притеснявайте много за тези трудни условия, ние ще ги покрием с кода :)

Време за кодиране

За да посочите пътищата и дестинациите на вашия браузър, трябва да импортирате RouterModule и Routes от @angular/router във вашия app.module.ts файл.

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

След това можете да дефинирате масив от вашите пътища и целеви страници.

const routes: Routes = [
  {
    path: '',
    redirectTo: 'items',
    pathMatch: 'full'
  },
  {
    path: 'items',
    component: AppComponent
  }
];

Забележка: Тук pathMatch указва стриктно съвпадение на пътя за достигане на целевата страница.

И накрая, трябва да предадете масива от маршрути в RouterModule с помощта на RouterModule.forRoot(routes) и трябва да го добавите към imports

RouterModule.forRoot(routes)

Пълният файл app.module.ts ще изглежда така:

Обяснение:

В масива routes обектът path е '', което означава пътя http://localhost:4200/, ние не сме предоставили дестинация към този обект, но пренасочваме този път към items път с помощта на ключ redirectTo.

Сега всяка заявка на http://localhost:4200/ ще бъде пренасочена към http://localhost:4200/items. В следващия обект посочихме местоназначението за пътя items до AppComponent, като използвахме ключа component, което означава, че при всяка заявка на http://localhost:4200/items AppComponent ще получи изобразяване.

Поток на процеса:

Request on http://localhost:4200/

Redirected to http://localhost:4200/items

AppComponent will get Render

Страхотно... :) Нашата конфигурация за маршрутизиране е настроена, но трябва да кажем на приложението Angular къде да постави нашия изобразен AppComponent.

За това ще използваме router-outlet .

Тъй като нашето приложение стартира AppComponent при първото зареждане. Най-добрият избор ще бъде да прехвърлите кода на AppComponent към дъщерния компонент и да поставите само router-outlet вътре в AppComponent.

И така, нека направим дъщерния компонент, наречен тук ListComponent, използвайки командата:

ng generate component list

И тогава ще прехвърлим целия код на ListComponent от AppComponent

Накрая ще напишем <router-outlet></router-outlet> в app.component.html. Това ще гарантира, че DOM на компонента трябва да бъде поставен тук.

Накрая ще видите резултата на екрана, както следва. Това е дъщерният компонент, който се изобразява в своя родител, когато пътят е съпоставен в рутера.

За пълния код, моля, проверете хранилището



aayusharora/Angular-Routing
Допринесете за развитието на Angular-Routing, като създадете акаунт в GitHub.github.com



Надявам се, че тази публикация наистина ще ви помогне да добавяте лесно маршрути във вашето Angular приложение. В следващата част ще видим концепцията зад Nested Routing.

Дотогава чао :p

Ако ви е харесала статията, моля, пляскайте с ръце. Съвет — Можете да пляскате 50 пъти!

Моля, споделете също във Fb и Twitter. Ако искате да получавате актуализации, последвайте ме в Twitter и Medium. Ако нещо не е ясно или искате да посочите нещо, моля, коментирайте по-долу.