eleks.com eleks.com

JAVA SCRIPT FRAMEWORKSНа прикладі Angular 2

Що нас чекає• Короткий огляд

Java Script Frameworks

• Огляд Angular 2• Розбір основних

компонентів Angular 2

• Demo

JS Frameworks. Навіщо вони вам?

• Client-side має більше «відповідальності» ніж колись

• Фреймворк надає інфраструктуру для розробки (очевидно)

• Фреймворк пропагує певні підходи і стандарти

• Він може спростити життя розробника

Найпопулярніші JS Frameworks

Angular

Переваги та Недоліки• Плюси

Швидкодія Архітектурне

рішення TypeScript Простота вивчення Велике ком’юніті Підтримка Google

o Мінуси

o Специфічний синтаксис темплейтів

o TypeScript

На чому писати

Архітектура

Component – це основний структурний блок додатку на Angular. Додаток можна уявити, як набір компонентів, які взаємодіють між собою.

Структура Компонента

Template

• Відображення з HTML

• Прив’язка даних

• Використання директив

Class

• Клас на TypeScript

• Логіка програми

• Властивості та методи

Metadata

• Дані для самого Angular

• Декоратор для класу

Код Компонента

ШаблонШаблон – це відображення, описане на HTML з використанням виразів прив’язки даних та директив.

Прив’язка Даних

ДирективиВбудовані директиви• ngIf• ngFor• ngSwitch• ngClass• ngStyle

Сервіс – це простий клас, який призначений для виконання кокретних дій. Він може повторно застосовуватись, використовується компонентами, але незалежний від них.

Сервіси та DIДля DI сервіса:• Створити клас

сервіса• Зареєструвати

сервіс в контейнері

• Заін’єктити в компонент через конструктор

Комунікація із серверомДля комунікації використовується HTTP Client, який входить в склад фреймворка і працює на основі Observables

https://angular.io/docs/ts/latest/guide/server-communication.html

РоутінгRouting – забезпечує процес переходу юзера між функціональними елементами SAP. Використовується для навігації по додатку.

https://angular.io/docs/ts/latest/guide/router.html

Що не потрапило в презентацію• Pipes• Angular Lifecycle• @Input, @Output та деталі про

Nested Components• Та багато іншого

Корисні Посилання• Офіційна документація

https://angular.io/docs/ts/la • Хаб з ресурсами

http://www.angular2.com/

Thanks! Any Questions?

P.S.До наступного юніта вам потрібно інсталювати:

Лекція 1: JDK; Eclipse IDEЛекція 2-5: Android Studio; Android SDK; Genymotion emulator: install and download any device image (or a couple: phone and tablet).

eleks.com

Inspired by Technology.Driven by Value.