WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Наши преимущества

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


Регистрация на сайте

Angular навигация по сайту (routing)

Angular - навигация по сайту (Angular routing)

При помощи  Routing - модуля Angular позволяет организовать привычную навигацию по страничкам сайта:

  • если ввести в адресной строке браузера IRI нужной странички, то она откроется
  • если кликнуть по ссылке на нужную страничку сайта (меню сайта, другие внутренние ссылки) , то Angular откроет её в окне браузера
  • если пользоваться кнопками браузера НАЗАД, ВПЕРЁД, то мы будем перемещаться по истории посещённых страничек сайта.

Сконфигурируем сайт, который будет состоять из: одной главной странички - home, страничек  About, Contacts и специальной странички, которая будет открываться в том случае, если посетитель сайта пытается перейти на несуществующую страничку - NotFound.

Для этого:

  • генерируем новый проект с опцией - routing (ng new routing-test1 --routing) в дополнение к стандарной конфигурации проекта появится модуль app-routing.module.ts
  • генерируем модуль с названием header для меню сайта
  • генерируем модули для каждой нужной странички сайта (home, about, contacts, notFound)
  • проверяем наличие тега <base href="/"> в файле index.html, что обязательно для работы router 
  • конфигурируем router - модуль (ссылки и их привязки к компонентам)
  • конфигурируем шаблон сайта в модуле app.component

Angular создаёт app-routing.module.ts

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }


Генерируем нужные компоненты:

ng g c not-found

ng g c contacts

ng g c home

ng g c header

ng g c about


Все компоненты и Router импортированы в app.module - проверяем:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { HeaderComponent } from './header/header.component'; import { AboutComponent } from './about/about.component'; import { ContactsComponent } from './contacts/contacts.component'; import { NotFoundComponent } from './not-found/not-found.component'; @NgModule({ declarations: [ AppComponent, HomeComponent, HeaderComponent, AboutComponent, ContactsComponent, NotFoundComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }


Конфигурируем - app.component

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }


Его HTML шаблон:

<div id='wrapper'> <app-header></app-header> <router-outlet></router-outlet> </div>

Через него определяем место (placeholder ) в окне браузера для компонента-меню (<app-header></app-header>)

И для меняющихся компонентов-страничек ( <router-outlet></router-outlet>)

Его стили:

#wrapper { display: grid; grid-template-rows: auto auto; grid-template-columns: 1fr; }


Компоненты страничек практически ничем, в нашем примере, друг от друга не отличаются (только текстом в HTML).

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.css'] }) export class AboutComponent implements OnInit { constructor() { } ngOnInit() { } }


HTML

<h1>About Us</h1>


Компонент header - это меню сайта (он показывает кнопки меню и привязывает их к тем путям URI , которые мы задали в раутере, он появляется на каждой страничке):

import { Component} from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) export class HeaderComponent { constructor() { } }


HTML

Директивы routerLink привязывают тег A к пути, который задан в модуле Router (константа routes )

Директивы routerLinkActive присваивают элементам A класс стилей myActive в тот момент, когда ссылка активна.

<div id='navBlock'> <a class='menuItem' routerLink='/home' routerLinkActive="myActive">Home</a> <a class='menuItem' routerLink='/about' routerLinkActive="myActive">About</a> <a class='menuItem' [routerLink]="['/contacts']" routerLinkActive="myActive">Contacts</a> </div>


Стили

Селектор  .menuItem[class*='myActive'] описывает стиль для активной ссылки. Класс myActive она получает по директиве routerLinkActive

#navBlock { display: grid; grid-template-columns: repeat(3, minmax(auto, 300px)); grid-template-rows: 1fr; justify-content: center; align-content: space-between; border-bottom: 1px solid #aaa; } .menuItem { display: inline-block; text-align: center; padding: 10px 0px; margin: 10px; border: 1px solid #FFF; font-weight: bold; font-size: 1.2re; border-radius: 5px; box-shadow: 0px 2px 5px 1px rgba(100, 100, 100, 0.294); } .menuItem:hover { border-color: red; box-shadow: 0px 5px 10px 3px rgba(100, 100, 100, 0.294); } .menuItem[class*='myActive'] { color: red ! important; } .menuItem:visited { color: blue; } A { text-decoration: none; }




Конфигурируем router.

Конфигурируем в константе routes массив ссылок. Каждый элемент массива - путь и компонент, который к этому пути привязан.

Элемент массива {path: '', redirectTo: '/home', pathMatch: 'full'} переадресовывает ссылки в корень сайта на страничку home

Элемент массива {path: '**', component: NotFoundComponent} переадресовывает все странички, путь к которым не соответствует фильтрам пути в предыдущих элементах, на страничку NotFound 

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AboutComponent } from './about/about.component'; import { ContactsComponent } from './contacts/contacts.component'; import { HomeComponent } from './home/home.component'; import { NotFoundComponent } from './not-found/not-found.component'; const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {path: 'home', component: HomeComponent}, {path: 'about', component: AboutComponent}, {path: 'contacts', component: ContactsComponent}, {path: '**', component: NotFoundComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }



Результат :