WEB start

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

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

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

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


Курсы WEB

Закончив наш курс, вы научитесь самостоятельно строить коммерческие интернет сайты любой сложности, управлять их размещением на WEB - хостинге, оптимизировать их и "продвигать" в Интернете.

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

hit 
counter

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


Введите текст с картинки

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

Angular 5 databinding

Связывание данных (обмен данными между приложением и окном браузера) - это механизм связи между тем, что видят пользователи в окне браузера, и теми данными, которыми манипулирует приложение (компонент). 

Достаточно описать связь между данными компонента (различными свойствами компонента) с одной стороны и данными, которые отображает в окне браузера HTML шаблон компонента, с другой.

Angular будет автоматически отслеживать эти изменения, отображая в окне браузера и меняя данные приложения.

Можно разделить способы обмена данными между приложением и его шаблоном на несколько категорий:

  • передача данных от шаблона в компонент (Angular string interpolation, property binding, class binding, style bynding, ngStyle, ngClass)
  • отслеживание событий, связвнных с DOM элементами шаблона (Angular Event Binding, $event)
  • двусторонний обмен данными между шаблоном и компонентом (Angular two-way data binding, ngModel)


Интерполяция (Angular string interpolation)

{{expression}}
[target]="expression"
bind-target="expression"

Обработка событий в окне


(target)="statement" on-target="statement"

Можно использовать встроенный Angular объект - $event. Он автоматически привязывается к использующему его событию. Его свойства содержат свойства события и сыойства элемента, который это событие обработал

Пример:

import { Component} from '@angular/core'; @Component({ selector : 'app-comp2', template : ` <h1> $event properties - > to console </h1> <button class='btn' (click)='displEvntProp($event)'>Log $event properties</button> `, styles : [''] }) export class Comp2Component { constructor() { } displEvntProp(evnt){ console.log(evnt); } }


event filter 

Template variable

#var1 = template reference variables in Angular

Эта переменная будет содержать ссылку на DOM элемент

<input type="text" (change)="true" #variable> {{ variable.value }} <my-component #variable [input]="'hello'"></my-component> {{ variable.input }} <form #variable="ngForm"> <!-- some more HTML ... --> <button type="submit" [disabled]="variable.form.invalid">Submit!</button> </form>

console.log($event) - вывести в консоль все его свойства, методы

Event bubbling - отслежтванте события всеми родительскими элементами в пррядке иерархии

$event.stopPropagation() - метод, который отменяет процесс event bubbling

Пример:



(String interpolation, property binding, custom variables)

<div style="text-align:center"> <h1> Пример : {{ title }}! </h1> </div> <hr> <button id="myButton" #myBut1 type="submit" class="btn btn-default" [disabled]="buttonDisabled" [style.color]="buttonColor" (click)="myButClick($event)"> <i>{{buttonText}}</i> </button> <p style="color:blue" [innerHTML]="myBut1.innerText"></p> <p style="color:red">{{buttonText}} </p> <hr>



import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'data binding test'; buttonDisabled = true; buttonText = "Ждите"; buttonColor = "red"; evntOut; constructor (){ setTimeout(()=>{ this.buttonDisabled = false; this.buttonText = "Вводите"; this.buttonColor = "green"; },5000); } myButClick (evnt){ this.buttonText = "Нажали уже!" ; this.buttonDisabled = true; this.evntOut = evnt; console.log(evnt); }; }




Переменные шаблона

Templaеу variable #var1 = template reference variables in Angular

Эта переменная будет содержать ссылку на DOM элемент

<input type="text" (change)="true" #variable> {{ variable.value }} <my-component #variable [input]="'hello'"></my-component> {{ variable.input }} <form #variable="ngForm"> <!-- some more HTML ... --> <button type="submit" [disabled]="variable.form.invalid">Submit!</button> </form>

Двусторонний обмен данными

Директива ngModel  

Содержится в модуле 


[(target)]="expression"
bindon-target="expression" <example-component [(message)]="title"></example-component> Name: <input type="text" [(ngModel)]="name" /> <div>{{name}}</div>


Импортировать в app.module.ts

import { FormsModule } from '@angular/forms'; // Importing forms module to this file

и  

imports: [ BrowserModule, FormsModule // Importing forms module to application module ],

Angular обеспечивает простой способ обработки событий, связанныз с элементами DOM. 

Метод двусторонней привязки помогает поддерживать синхронизацию данных и управление вводом.


Двусторонняя привязка данных объединяет ввод и вывод в одном описании, используя директиву ngModel.

<input [(ngModel)]="name" >

Это эквивалентно:

<input [ngModel]="name" (ngModelChange)="name=$event">



Pipes

Последовательное поточное динамическое форматирование данных


BuiltIn pipes

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, PercentPipe.



Custom pipes