Angular. presentation
-
Upload
eleksdev -
Category
Technology
-
view
1.921 -
download
1
Transcript of Angular. presentation
![Page 1: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/1.jpg)
eleks.com eleks.com
JAVA SCRIPT FRAMEWORKSНа прикладі Angular 2
![Page 2: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/2.jpg)
Що нас чекає• Короткий огляд
Java Script Frameworks
• Огляд Angular 2• Розбір основних
компонентів Angular 2
• Demo
![Page 3: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/3.jpg)
JS Frameworks. Навіщо вони вам?
• Client-side має більше «відповідальності» ніж колись
• Фреймворк надає інфраструктуру для розробки (очевидно)
• Фреймворк пропагує певні підходи і стандарти
• Він може спростити життя розробника
![Page 4: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/4.jpg)
Найпопулярніші JS Frameworks
![Page 5: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/5.jpg)
Angular
![Page 6: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/6.jpg)
Переваги та Недоліки• Плюси
Швидкодія Архітектурне
рішення TypeScript Простота вивчення Велике ком’юніті Підтримка Google
o Мінуси
o Специфічний синтаксис темплейтів
o TypeScript
![Page 7: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/7.jpg)
На чому писати
![Page 8: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/8.jpg)
Архітектура
![Page 9: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/9.jpg)
Component – це основний структурний блок додатку на Angular. Додаток можна уявити, як набір компонентів, які взаємодіють між собою.
![Page 10: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/10.jpg)
Структура Компонента
Template
• Відображення з HTML
• Прив’язка даних
• Використання директив
Class
• Клас на TypeScript
• Логіка програми
• Властивості та методи
Metadata
• Дані для самого Angular
• Декоратор для класу
![Page 11: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/11.jpg)
Код Компонента
![Page 12: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/12.jpg)
ШаблонШаблон – це відображення, описане на HTML з використанням виразів прив’язки даних та директив.
![Page 13: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/13.jpg)
Прив’язка Даних
![Page 14: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/14.jpg)
ДирективиВбудовані директиви• ngIf• ngFor• ngSwitch• ngClass• ngStyle
![Page 15: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/15.jpg)
Сервіс – це простий клас, який призначений для виконання кокретних дій. Він може повторно застосовуватись, використовується компонентами, але незалежний від них.
![Page 16: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/16.jpg)
Сервіси та DIДля DI сервіса:• Створити клас
сервіса• Зареєструвати
сервіс в контейнері
• Заін’єктити в компонент через конструктор
![Page 17: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/17.jpg)
![Page 18: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/18.jpg)
Комунікація із серверомДля комунікації використовується HTTP Client, який входить в склад фреймворка і працює на основі Observables
https://angular.io/docs/ts/latest/guide/server-communication.html
![Page 19: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/19.jpg)
РоутінгRouting – забезпечує процес переходу юзера між функціональними елементами SAP. Використовується для навігації по додатку.
https://angular.io/docs/ts/latest/guide/router.html
![Page 20: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/20.jpg)
Що не потрапило в презентацію• Pipes• Angular Lifecycle• @Input, @Output та деталі про
Nested Components• Та багато іншого
![Page 21: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/21.jpg)
Корисні Посилання• Офіційна документація
https://angular.io/docs/ts/la • Хаб з ресурсами
http://www.angular2.com/
![Page 22: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/22.jpg)
Thanks! Any Questions?
![Page 23: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/23.jpg)
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).
![Page 24: Angular. presentation](https://reader030.fdocuments.co/reader030/viewer/2022021502/58707fe11a28ab57368b61e1/html5/thumbnails/24.jpg)
eleks.com
Inspired by Technology.Driven by Value.