Hello Angular 11

=====Определение маршрутов===== Маршрутизация позволяет сопоставлять запросы к приложению с определенными ресурсами внутри приложения.\\ \\ Ключевым для работы маршрутизации является модуль RouterModule, который располагается в пакете @angular/router. Поэтому при работе с маршрутизацией этот пакет должен быть указан в списке зависимостей в файле package.json:\\ \\


{
    "name": "helloapp",
    "version": "1.0.0",
    "description": "First Angular 11 Project",
    "author": "Eugene Popov ",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build"
    },
    "dependencies": {
        "@angular/router": "~11.0.0",
        // остальные пакеты
    },
    "devDependencies": {
          
        // остальные пакеты
    }
}

\\ Для определения маршрутов возьмем базовую структуру приложения: \\ {{:angular:angular2:routing:7.16.png|}}\\ \\ Для работы с маршрутизацией в первую очередь стоит определить базовый адрес приложения. Для этого возьмем веб-страницу **index.html** и добавим в секцию элемент :





    
    
    Hello Angular 11


    Загрузка...

В качестве базового адреса будет рассматриваться корень приложения.\\ \\ Каждый маршрут сопоставляется с определенным компонентом. Поэтому добавим в проект ряд компонентов. Так, добавим в папку src/app новый файл **home.component.ts**:


import { Component} from '@angular/core';
  
@Component({
    selector: 'home-app',
    template: `Главная`
})
export class HomeComponent { }

Этот простенький компонент выводит обычный заголовок.\\ \\ Далее добавим в папку src/app новый файл about.component.ts:


import { Component} from '@angular/core';
  
@Component({
    selector: 'about-app',
    template: `О сайте`
})
export class AboutComponent { }

И также добавим еще один файл **not-found.component.ts**:


import { Component} from '@angular/core';
  
@Component({
    selector: 'not-found-app',
    template: `Страница не найдена`
})
export class NotFoundComponent { }

====RouterModule и добавление маршрутов==== Итак, кроме главного компонента AppComponent в проекте определено еще три компонента, каждый из которых просто выводит некоторый заголовок. Для каждого из этих компонентов мы можем определить свой маршрут. Для этого изменим код модуля AppModule:


import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
import {Routes, RouterModule} from '@angular/router';
 
import { AppComponent }   from './app.component';
import { AboutComponent }   from './about.component';
import { HomeComponent }   from './home.component';
import { NotFoundComponent }   from './not-found.component';
 
// определение маршрутов
const appRoutes: Routes =[
    { path: '', component: HomeComponent},
    { path: 'about', component: AboutComponent},
    { path: '**', component: NotFoundComponent }
];
 
@NgModule({
    imports:      [ BrowserModule, RouterModule.forRoot(appRoutes)],
    declarations: [ AppComponent, HomeComponent, AboutComponent, NotFoundComponent],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

Во-первых, здесь импортируются модуль маршрутизации RouterModule и класс Routes, представляющий коллекцию маршрутов:


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

Далее определяется сам набор маршрутов:


const appRoutes: Routes =[
    { path: '', component: HomeComponent},
    { path: 'about', component: AboutComponent},
    { path: '**', component: NotFoundComponent }
];

Здесь определено три маршрута, каждый из которых будет обрабатываться отдельным компонентом. Для указания маршрута применяется параметр //path//. Например, путь "about" будет представлять запрос типа "http://localhost:3000/about" и будет обрабатываться классом AboutComponent.\\ \\ Если запрос не содержит никаких сегментов, например, просто имя домена "http://localhost:3000/", то такой запрос будет сопоставляться с путем "" (пустая строка) и будет обрабатываться компонентом HomeComponent.\\ \\ Если приложение получит запрос, который не подходит ни под один из выше определенных маршрутов, то он будет сопоставляться с шаблоном %%"**"%%, где две звездочки представляют любой путь.\\ \\ Чтобы применить маршруты, они передаются в метод RouterModule.forRoot(appRoutes):


imports: [ BrowserModule, RouterModule.forRoot(appRoutes)],

Метод RouterModule.forRoot() возвращает модуль, который содержит сконфигурированный сервис Router. Когда приложение загружается, Router выполняет начальную навигацию по текущему URL, который стоит в адресной строке браузера. ====RouterOutlet==== Мы определили три разных компонента для разных маршрутов, однако в качестве главного компонента выступает AppComponent. Этот компонент выступает в качестве контейнера для остальных компонентов, которые будут обслуживать запросы к приложению.\\ \\ Но чтобы можно было внедрить в AppComponent тот компонент, который обрабатывает запрос, необходимо использовать элемент RouterOutlet. Для этого изменим код AppComponent:


import { Component} from '@angular/core';
  
@Component({
    selector: 'my-app',
    template: `
                    Маршрутизация в Angular 11
                    
               `
})
export class AppComponent {}

На место элемента будет рендериться компонент, выбранный для обработки запроса.\\ \\ Запустим приложение. По умолчанию приложение запускается без сегментов, поэтому запрос обрабатывает HomeComponent:\\ \\ {{ :angular:angular2:routing:7.1.png |}}\\ \\ Перейдем по пути "localhost:xxxx/about":\\ {{ :angular:angular2:routing:7.2.png |}}\\ \\ При переходе к любому другому адресу сработает компонент NotFoundComponent:\\ \\ {{ :angular:angular2:routing:7.3.png |}}\\ \\ ====URL Matching и порядок маршрутов==== Когда будет выполняться переход по определенному пути, например, "/about", система маршрутизации сопоставляет последовательно URL запроса с параметрами path у каждого маршрута. Данный процесс называется url matching. В частности, система маршрутизации сопоставит url "/about" с маршрутом { path: 'about', component: AboutComponent}. И компонент AboutComponent будет выбран для обработки запроса по пути /about.\\ \\ Но при определении маршрутов следует учитывать их порядок. Вполне возможно, что под определенный запрос будет соответствовать сразу несколько маршрутов. В этом случае запрос будет обрабатываться первым из них. Другие же маршруты не будут учитываться. Например, если мы изменим порядок маршрутов:\\ \\


const appRoutes: Routes =[
    { path: '**', component: NotFoundComponent },
    { path: '', component: HomeComponent},
    { path: 'about', component: AboutComponent}
];

То в этом случае запрос /about будет обрабатываться первым маршрутом, поскольку он соответствует запросу /about (путь %%'**'%% соответствует любому набору символов). Поэтому маршрут


{ path: '**', component: NotFoundComponent }

лучше определить последним - для всех тех запросов, которые не будут соответствовать ни одному из выше определенных маршрутов.\\ ====Переадресация==== Вполне возможно, что по какому-то маршруту мы захотим сделать переадресацию по другому пути. Например, в случае, если нужного маршрута для запроса не найдено, мы можем переадресовать на главную страницу:\\


const appRoutes: Routes =[
    { path: '', component: HomeComponent},
    { path: 'about', component: AboutComponent},
    { path: '**', redirectTo: '/'}
];

Для переадресации указываем параметр **redirectTo**. Его значение представляет путь переадресации. В данном случае слеш указывает на первый маршрут или на главную страницу.\\ \\ Также мы можем задать критерий соответствия строки запроса маршруту с помощью параметра **pathMatch**:


const appRoutes: Routes =[
    { path: '', component: HomeComponent},
    { path: 'about', component: AboutComponent},
    { path: 'contact', redirectTo: '/about', pathMatch:'full'},
    { path: '**', redirectTo: '/'}
];

Значение pathMatch:'full' указывает, что запрошенный адрес должен полностью соответствовать маршруту, то есть должно быть полное соответствие. Например, запрос /contact полностью соответствует маршруту { path: 'contact', redirectTo: '/about', pathMatch:'full'}, поэтому будет выполняться переадресация на адрес /about.\\ \\ А запрос /contact/5 не будет соответствовать этому маршруту, так как после "contact" идут другие сегменты.