Post on 03-Jun-2020
Angular 2 - Introduction | Anton Korniychuk 2
Фреймворков
много...
Angular 2 - Introduction | Anton Korniychuk 3
Фреймворк (неологизм от англ. framework — каркас, структура) — программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.
Фреймворк отличается от понятия библиотеки тем, что библиотека может быть использована в программном продукте просто как набор подпрограмм близкой функциональности, не влияя на архитектуру программного продукта и не накладывая на неё никаких ограничений.
Может включать вспомогательные программы, библиотеки кода, язык сценариев и другое ПО, облегчающее разработку и объединение разных компонентов большого программного проекта. Обычно объединение происходит за счёт использования единого API.
Angular 2 - Introduction | Anton Korniychuk 4
Фреймвокр — это каркас
Angular 2 - Introduction | Anton Korniychuk 5
Angular — MV* framework
Angular 2 - Introduction | Anton Korniychuk 7
Но почему именноAngular?
Backbone.js
Ember.js
React.js
Knockout.js
Angular 2 - Introduction | Anton Korniychuk 8
Посмотрим на факты!
Angular 2 - Introduction | Anton Korniychuk 9
GitHub stars
Angular.js 1 Angular.js 2 Ember.js React.js Backbone.js0
5000
10000
15000
20000
25000
30000
35000
40000
45000
50000
0
5000
10000
15000
20000
25000
30000
35000
40000
45000
50000
Angular 2 - Introduction | Anton Korniychuk 10
GitHub forks
Angular.js 1 Angular.js 2 Ember.js React.js Backbone.js0
5000
10000
15000
20000
25000
0
5000
10000
15000
20000
25000
Angular 2 - Introduction | Anton Korniychuk 11
Angular.js Ember.js React.js Backbone.js0
20000
40000
60000
80000
100000
120000
140000
160000
180000
0
20000
40000
60000
80000
100000
120000
140000
160000
180000
Angular 2 - Introduction | Anton Korniychuk 12
Amazon.com books
Angular.js Ember.js React.js Backbone.js0
50
100
150
200
250
300
350
400
450
0
50
100
150
200
250
300
350
400
450
Angular 2 - Introduction | Anton Korniychuk 13
google trands
Angular 2 - Introduction | Anton Korniychuk 14
upwork.com — кол-во результатов
Angular.js Angular.js 2 Ember.js React.js Backbone.js0
100
200
300
400
500
600
700
0
100
200
300
400
500
600
700
Angular 2 - Introduction | Anton Korniychuk 15
Ничего не поделать...AngularJS захватил мир!
Angular 2 - Introduction | Anton Korniychuk 16
Go в код!
Angular 2 - Introduction | Anton Korniychuk 17
Под angular 2 пишут на:
● TypeScript © Microsoft● Dart © Google● JavaScript (ES5/ES6)
Angular 2 - Introduction | Anton Korniychuk 18
Самое простое приложениеПо примерам документации
Angular 2 - Introduction | Anton Korniychuk 19
Пример на JavaScript
Angular 2 - Introduction | Anton Korniychuk 20
index.html
Angular 2 - Introduction | Anton Korniychuk 21
App component js
Выглядит знакомо, но запутанно...
Angular 2 - Introduction | Anton Korniychuk 22
main.js
Angular 2 - Introduction | Anton Korniychuk 23
Пример на TypeScript
Angular 2 - Introduction | Anton Korniychuk 24
index.html
Angular 2 - Introduction | Anton Korniychuk 25
app.component.ts
Вот оно! С
овершенство...
Angular 2 - Introduction | Anton Korniychuk 26
main.tsчисто и прозрачно...
Angular 2 - Introduction | Anton Korniychuk 27
Angular 2 - Introduction | Anton Korniychuk 28
Angular 2 - Introduction | Anton Korniychuk 29
Angular 2Написан на TypeScript
Вы можете писать на: TS, ES6, ES5 or Dart
Angular 2 - Introduction | Anton Korniychuk 30
Angular 2 - Introduction | Anton Korniychuk 31
Angular 2 - Introduction | Anton Korniychuk 32
АннотацииКастомизация компонентов
Angular 2 - Introduction | Anton Korniychuk 33
Аннотации в ES5Кастомизация компонентов
Angular 2 - Introduction | Anton Korniychuk 34
КонтроллерЭту логику содержит компонент
Angular 2 - Introduction | Anton Korniychuk 35
Контроллер в ES 5Эту логику содержит компонент
Angular 2 - Introduction | Anton Korniychuk 36
Синтаксис шаблоновСодержит 3 основные особенности
#localVar — Локальная переменная
[innerText] — Привязка саойства
(click) — Обработка события
Angular 2 - Introduction | Anton Korniychuk 37
Синтаксис шаблоновСодержит 3 основные особенности
Angular 2 - Introduction | Anton Korniychuk 38
Синтаксис шаблоновузнавай об ошибках сразу
Angular 2 - Introduction | Anton Korniychuk 39
Angular 2 - Introduction | Anton Korniychuk 40
Angular 2 Style Guidehttps://github.com/mgechev/angular2-style-guide
Angular 2 - Introduction | Anton Korniychuk 41
Angular 2 - Introduction | Anton Korniychuk 42
Ссылкиhttps://angular.io
https://github.com/ancor-dev/angular2-todo // исходники с презентации
https://github.com/mgechev/angular2-style-guide // правила хорошего тона
/** * Все для изучения Angular 2 */ * + Книги * + Статьи * + Видео ресурсы */
https://github.com/timjacobi/angular2-education
Angular 2 - Introduction | Anton Korniychuk 43
СпасибоСпасибоза внимание!за внимание!