WEB start

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

hit 
counter

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

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


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

Angular 6

  • Angular 6 component interaction

    Обмен данными между родительским и дочерним компонентом (Angular component interaction)

    @input


    @output


    Decorators


    Event emitter


    C помощью декораторов @Input, @Output и API EventEmitter можно обеспечить обмен данными между родительскими и дочерними компонентами.


    Декоратор @Input

    Дочерний компонент с помощью декоратора input может получать данные от родительского, а  с помощью декоратора output - посылать.


    Для получения данных от родительского компонента дочерним:

    - в дочернем компоненте создаём свойство, в которое данные будем получать, декорируем его с помощью декоратора @Input

    - в родительском компоненте создаём public - свойство, которое будем передавать

    - при вызове дочернего компонента через созданное нами свойство привязываем к свойству дочернего компонента данные из родительского.


    Родительский компонент:

    import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; public string1 = <string> 'Data from parent...'; }


    Шаблон родительского компонента - вызов дочернего:

    <h1>This is parent component:</h1> <hr> <app-inoutcomponent [inFromParent]='string1'></app-inoutcomponent>


    Дочерний компонент

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


    Шаблон дочернего компонента 

    <h1>This is child component:</h1> <h3>{{inFromParent}}</h3>


    Результат



    Добавим в родительский компонент метод, который меняет это свойство. Привяжем его к событию click кнопки.

    import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; public string1 = <string> 'Data from parent...'; changeChildData() { this.string1 += ' Changed '; } }


    При каждом нажатии к строке будем приписывать текст: this.string1 += ' Changed ';


    Результат после 2-х кликов:



    Декоратор @Output и  EventEmitter 

    Передача данных от дочернего компонента к родительскому.

    Для этого используем декоратор @Output и привяжем к дочернеиу компоненту обработчик событий, который инициирует эту передачу.


    У дочернего компонета создаём своё событие - outToParent (объект класса EventEmitter ), декорируя его декоратором @Output.

    Создадим в дочернем компоненте метод - sendToParent() . Его задача: передать событие родительскому объекту (метод emit()).

    Передано это событие будет через Angular объект - $event.

    Таким образом, созданное нами событие - outToParent произойдёт в тот момент, когда сработает sendToParent()и его (события) содержимое можно будет получить из $event.


    Дочерний компонент

    import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-inoutcomponent', templateUrl: './inoutcomponent.component.html', styleUrls: ['./inoutcomponent.component.css'] }) export class InoutcomponentComponent implements OnInit { @Input() public inFromParent: string; @Output() public outToParent = new EventEmitter(); constructor() { } ngOnInit() { } sendToParent() { this.outToParent.emit('Child sent this message to parent...'); } }


    Привяжем обработчик событий - click к кнопке в шаблоне дочернего компонента и по этому клику вызовем метод sentToParent, который в свою очередь включит событие outToParent:

    Шаблон дочернего компонента

    <h1>This is child component:</h1> <h3>{{inFromParent}}</h3> <br> <button (click)='sendToParent()'>Click to send data!</button> <br>


    Стиль дочернего компонента

    * {
    color: green;
    }



    Родительский компонент получает данные события методом, который мы в нём создали - getNessage()

    import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; public string1 = <string> 'Data from parent...'; public string2 = ''; changeChildData() { this.string1 += ' Changed '; } receiveFromChild(evnt){ this.string2 = evnt; } }



    Шаблон родительского компонента (outToParent - новое событие, которое мы создали)

    <h1>This is parent component:</h1> <button (click)='changeChildData()'>Change child data </button> <hr> <strong>{{string2}}</strong> <app-inoutcomponent (outToParent)='receiveFromChild($event)' [inFromParent]='string1'></app-inoutcomponent>


    До клика



    После клика



    Декоратор @Component, свойства - inputs, outputs


    Вместо использования декораторов свойств - @Input и @Outpur можно использовать свойства декоратора класса - @Component (inputs, outputs).


    import { Component, OnInit, EventEmitter } from '@angular/core'; // import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-inoutcomponent', templateUrl: './inoutcomponent.component.html', styleUrls: ['./inoutcomponent.component.css'], inputs: ['inFromParent'], outputs:['outToParent'] }) export class InoutcomponentComponent implements OnInit { // @Input() public inFromParent: string; inFromParent: string; // @Output() public outToParent = new EventEmitter(); outToParent = new EventEmitter(); constructor() { } ngOnInit() { } sendToParent() { this.outToParent.emit('Child sent this message to parent...'); } }


    Но Angular рекомендуют использовать @Input и @Output 

    https://angular.io/guide/styleguide#style-05-12)%20(use-output-property-decorator

    style 05-12






  • Angular 6 directives (part2)

    Встроенные директивы Angular (Angular built-in directives)

    Примеры


    app.modules.ts


    import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { StudentsComponent } from './students/students.component'; @NgModule({ declarations: [ AppComponent, StudentsComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }



    StudentsComponent

    import { Component, OnInit } from '@angular/core'; import { StudentsInterface } from '../students-interface'; @Component({ selector: 'app-students', templateUrl: './students.component.html', styleUrls: ['./students.component.css'] }) export class StudentsComponent implements OnInit { students: StudentsInterface[]; constructor() { } ngOnInit() { this.students = [ { name: 'Anna', id: 1234567, age: 22, course: 'Angular' }, { name: 'Haim', id: 987654, age: 18, course: 'WEB' }, { name: 'Yossy', id: 456687456, age: 44, course: 'C' }, { name: 'Vasily', id: 1234567, age: 22, course: 'PHP' }, { name: 'Bob', id: 14312554, age: 37, course: 'Photoshop' }, { name: 'Bob', id: 657856784567, age: 37, course: 'WEB' }, ]; } }



    StudentsInterface

    export interface StudentsInterface { name: string; id?: number; age: number; course: string; }



    students.component.html


    <h1>Students</h1> <hr> <h2>Names -all</h2> <ng-container *ngFor='let student of students; let n = index;'> <p>{{n}} : {{student.name}}</p> </ng-container> <hr> <h2>WEB students</h2> <ul *ngFor='let stud of students'> <li *ngIf='stud.course === "WEB"'>{{stud.course}} -> {{stud.name}}</li> </ul> <hr> <h2>Colored list</h2> <ul *ngFor='let studnt of students'> <ng-container [ngSwitch]='studnt.course'> <div style='color:red' *ngSwitchCase='"WEB"'>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div> <div style='color:green' *ngSwitchCase='"PHP"'>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div> <div style='color:blue' *ngSwitchCase='"C"'>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div> <div style='color:lightgray' *ngSwitchDefault>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div> </ng-container> </ul>





  • Angular 6 directives (part3)


    Примеры Angular директив

    (Angular built in directives)



    <H1>Students</H1> <table> <tr> <th>N</th> <th>Name</th> <th>Age</th> <th>Course</th> </tr> <tr *ngFor='let student of students; let n = index'> <td>{{n+1}}</td> <td>Name: {{student['Name']}}</td> <td>Age: {{student['Age']}}</td> <td>Course: {{student['Course']}}</td> </tr> </table> <hr> <h1>WEB students</h1> <table> <tr> <th>N</th> <th>Name</th> <th>Age</th> <th>Course</th> </tr> <ng-container *ngFor='let item of students; let n = index'> <tr *ngIf="item['Course'] == 'WEB'"> <td>{{n+1}}</td> <td>Name: {{item['Name']}}</td> <td>Age: {{item['Age']}}</td> <td>Course: {{item['Course']}}</td> </tr> </ng-container> </table> <hr> <ng-container *ngFor='let student of students'> <div *ngIf="student['Age'] >= 20; then adult; else child">this is ignored</div> <ng-template #adult>Adult: {{student['Name'] + ' Age:' + student['Age'] }}<br></ng-template> <ng-template #child>Child: {{student['Name'] + ' Age:' + student['Age'] }}<br></ng-template> </ng-container> <hr> <ng-container *ngFor='let student of students; let n = index'> {{n + 1}} <ng-container [ngSwitch]='student["Course"]'> <div *ngSwitchCase='"WEB"' style='color:red'> WEB : {{student['Name']}}<br> </div> <div *ngSwitchCase='"PHP"' style='color:green'> PHP : {{student['Name']}}<br> </div> <div *ngSwitchCase='"C++"' style='color:blue'> C++ : {{student['Name']}}<br> </div> </ng-container> </ng-container>



    import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-students', templateUrl: './students.component.html', styleUrls: ['./students.component.css'] }) export class StudentsComponent implements OnInit { students = []; constructor() { } ngOnInit() { this.students = [ {'Name': 'Ivan', 'Age': '25', 'Course': 'WEB'}, {'Name': 'Haim', 'Age': '20', 'Course': 'PHP'}, {'Name': 'Kate', 'Age': '19', 'Course': 'C++'}, {'Name': 'Ivan', 'Age': '25', 'Course': 'WEB'}, {'Name': 'Haim', 'Age': '30', 'Course': 'PHP'}, {'Name': 'Kate', 'Age': '19', 'Course': 'C++'}, {'Name': 'Ivan', 'Age': '16', 'Course': 'WEB'}, {'Name': 'Haim', 'Age': '33', 'Course': 'PHP'}, {'Name': 'Kate', 'Age': '10', 'Course': 'C++'} ]; console.log(this.students); } }






  • Angular 6 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 { }



    Результат :