Ссылки в Angular 2 — Маршрутизация

Ссылки в Angular 2 — Маршрутизация

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

Давайте рассмотрим, как работают в приложении Angular ссылки, и как осуществляется маршрутизация.

Шаг 1 — Добавьте тег базовой ссылки в файл index.html.

<!DOCTYPE html>
<html>
  <head>
 <base href = "/">
 <title>Angular QuickStart</title>
 <meta charset = "UTF-8">
 <meta name = "viewport" content = "width = device-width, initial-scale = 1">
 
 <base href = "/">
 <link rel = "stylesheet" href = "styles.css">
 
 <!-- Polyfill(s) for older browsers -->
 <script src = "node_modules/core-js/client/shim.min.js"></script>
 <script src = "node_modules/zone.js/dist/zone.js"></script>
 <script src = "node_modules/systemjs/dist/system.src.js"></script>
 <script src = "systemjs.config.js"></script>
 
 <script>
 System.import('main.js').catch(function(err){ console.error(err); });
 </script>
  </head>
 
  <body>
 <my-app></my-app>
  </body>
</html>

Шаг 2 — Создайте два маршрута для приложения. Для этого нужно добавить 2 файла с именами Inventory.component.ts и product.component.ts

Ссылки в Angular 2 — Маршрутизация

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Шаг 3 — Поместите в файл product.component.ts следующий код.

import { Component } from '@angular/core';
 
@Component ({
  selector: 'my-app',
  template: 'Products',
})
export class Appproduct  {
}

Шаг 4 — Поместите в файл Inventory.component.ts следующий код.

import { Component } from '@angular/core';
 
@Component ({
  selector: 'my-app',
  template: 'Inventory',
})
export class AppInventory  {
}

Оба компонента не делают ничего особенного, просто отображают ключевые слова для данного конкретного компонента. Таким образом, для компонента Inventory пользователю будет отображаться ключевое слово Inventory. А для компонента products отобразится ключевое слово product.

Шаг 5 — добавьте следующий код в файл app.module.ts -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';
 
const appRoutes: Routes = [
  { path: 'Product', component: Appproduct },
  { path: 'Inventory', component: AppInventory },
];
 
@NgModule ({
  imports: [ BrowserModule,
  RouterModule.forRoot(appRoutes)],
  declarations: [ AppComponent,Appproduct,AppInventory],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Отметим следующие моменты, касающиеся приведенного выше кода -

Приложения содержат 2 маршрута, один — к компоненту Appproduct, а другой — к компоненту AppInventory.

Убедитесь, что у вас объявлены оба компонента.

RouterModule.forRoot обеспечивает добавление маршрутов в приложение.

Шаг 6 — добавьте следующий код в файл app.component.ts.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
import { Component } from '@angular/core';
 
@Component ({
  selector: 'my-app',
  template: '
  <ul>
 <li><a [routerLink] = "['/Product']">Product</a></li>
 <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
  </ul>
  <router-outlet></router-outlet>'
})
export class AppComponent  { }

Необходимо отметить следующее: <router-outlet></router-outlet> — это заполнитель для визуализации компонента, на основе которого пользователь делает выбор.

Теперь сохраните весь код и запустите приложение, используя npm. В браузере вы должны увидеть следующее.

Ссылки в Angular 2 — Маршрутизация

Теперь, если вы нажмете ссылку Inventory, вы получите следующий результат.

Ссылки в Angular 2 — Маршрутизация

Добавление маршрута ошибки

Маршрутизация также позволяет добавить маршрут ошибки. Это может потребоваться, если пользователь пытается перейти на страницу, которая не существует в приложении. Давайте рассмотрим, как это реализовать.

Шаг 1 — Добавьте компонент PageNotFound через файл NotFound.component.ts, как показано ниже:

Ссылки в Angular 2 — Маршрутизация

Шаг 2 — Добавьте в созданный файл следующий код.

import { Component } from '@angular/core';
 
@Component ({ 
  selector: 'my-app', 
  template: 'Not Found', 
}) 
export class PageNotFoundComponent { 
} 

Шаг 3 — Добавьте в файл app.module.ts следующий код.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router'; 
 
const appRoutes: Routes = [ 
  { path: 'Product', component: Appproduct }, 
  { path: 'Inventory', component: AppInventory }, 
  { path: '**', component: PageNotFoundComponent } 
]; 
 
@NgModule ({ 
  imports: [ BrowserModule, 
  RouterModule.forRoot(appRoutes)], 
  declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
  bootstrap: [ AppComponent ] 
}) 
 
export class AppModule {
}

Примечание: Теперь у нас есть дополнительный маршрут с именем ‘**’, компонент: PageNotFoundComponent. Следовательно, ** предназначен для любого маршрута, который не является маршрутом по умолчанию. Пользователь будет перенаправлен к компоненту PageNotFoundComponent.

Теперь сохраните весь код и запустите приложение с помощью npm. В браузере вы должны увидеть следующий результат. Теперь, когда вы перейдете по какой-либо некорректной ссылке, вы увидите следующее.

Ссылки в Angular 2 — Маршрутизация

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree