angular 2 не так уж и плох... А если задуматься, то и просто...
TRANSCRIPT
![Page 1: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/1.jpg)
Angular 2 не так уж и плох,а если задуматься то и просто хорош.
Алексей Охрименко ( IPONWEB )
1
![Page 2: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/2.jpg)
Здоровье прежде всего
2
![Page 3: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/3.jpg)
Алексей Охрименко
Tweeter: @Ai_boy Gitter: aiboy
3
![Page 4: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/4.jpg)
IPONWEB
4
![Page 5: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/5.jpg)
5
import { Component } from '@angular/core';
@Component({ moduleId: module.id, selector: 'project-name-app', template: ` <h1 (click)='onClick()'> {{title}} </h1> `, styleUrls: ['project-name.component.css'] }) export class PROJECTNAMEAppComponent { title = 'project-name works!'; }
![Page 6: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/6.jpg)
6
import { Component } from '@angular/core';
@Component({ moduleId: module.id, selector: 'project-name-app', template: ` <h1 (click)='onClick()'> {{title}} </h1> `, styleUrls: ['project-name.component.css'] }) export class PROJECTNAMEAppComponent { title = 'project-name works!'; }
![Page 7: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/7.jpg)
7
import { Component } from '@angular/core';
@Component({ moduleId: module.id, selector: 'project-name-app', template: ` <h1 (click)='onClick()'> {{title}} </h1> `, styleUrls: ['project-name.component.css'] }) export class PROJECTNAMEAppComponent { title = 'project-name works!'; }
![Page 8: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/8.jpg)
Глава №1 - И была рука
8
![Page 9: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/9.jpg)
KSS
9
![Page 10: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/10.jpg)
KSS
10
Babel
![Page 11: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/11.jpg)
KSS
11
TypeScript?
![Page 12: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/12.jpg)
KSS
12
Angular 2
![Page 13: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/13.jpg)
Глава №2 - Горы отвращения
13
![Page 14: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/14.jpg)
Angular 2 is Beta*
14
* - now RC1
![Page 15: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/15.jpg)
ASP.Net MVC - Developer Preview 2
15
![Page 16: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/16.jpg)
16
![Page 17: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/17.jpg)
17([]) [] ()
([]) [] ()([]) []
([]) [] ()
([]) [] ()
([]) [] ()
([]) [] ()
([]) [] ()
([]) [] ()
([])
![Page 18: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/18.jpg)
18
![Page 19: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/19.jpg)
19
/** * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string * @param {Object} ctx - template context * @param {Object} eventHandlerObject - object that will be used as "this" in event handling * @returns {Node} returns dom node element */ export default function angularish(template, ctx, eventHandlerObject) { var node; var container = document.createElement('div');
container.innerHTML = template;
var walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, null, false); while (node = walker.nextNode()) {
// inheritance of context node.ctx = node.ctx || node.parentNode.ctx || ctx;
// ng-scope allows you to change scope of the node (new scope can be any property of old scope) if (node.getAttribute('ng-scope')) {
node.ctx = _getValue(node.ctx, node.getAttribute('ng-scope'));
} // ng-loop will repeat first child (TODO: reapeat content) and assign correct context if (node.getAttribute('ng-loop')) {
![Page 20: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/20.jpg)
20
/** * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string * @param {Object} ctx - template context * @param {Object} eventHandlerObject - object that will be used as "this" in event handling * @returns {Node} returns dom node element */ export default function angularish(template, ctx, eventHandlerObject) { var node; var container = document.createElement('div');
container.innerHTML = template;
var walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, null, false); while (node = walker.nextNode()) {
// inheritance of context node.ctx = node.ctx || node.parentNode.ctx || ctx;
// ng-scope allows you to change scope of the node (new scope can be any property of old scope) if (node.getAttribute('ng-scope')) {
node.ctx = _getValue(node.ctx, node.getAttribute('ng-scope'));
} // ng-loop will repeat first child (TODO: reapeat content) and assign correct context if (node.getAttribute('ng-loop')) {
![Page 21: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/21.jpg)
21
/** * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string * @param {Object} ctx - template context * @param {Object} eventHandlerObject - object that will be used as "this" in event handling * @returns {Node} returns dom node element */ export default function angularish(template, ctx, eventHandlerObject) { var node; var container = document.createElement('div');
container.innerHTML = template;
var walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, null, false); while (node = walker.nextNode()) {
// inheritance of context node.ctx = node.ctx || node.parentNode.ctx || ctx;
// ng-scope allows you to change scope of the node (new scope can be any property of old scope) if (node.getAttribute('ng-scope')) {
node.ctx = _getValue(node.ctx, node.getAttribute('ng-scope'));
} // ng-loop will repeat first child (TODO: reapeat content) and assign correct context if (node.getAttribute('ng-loop')) {
![Page 22: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/22.jpg)
22
node.value = _getValue(node.ctx, node.getAttribute('ng-value'));
} // ng-selected will set selected attribute depending on true-finess of value if (node.getAttribute('ng-selected')) {
var selected = _getValue(node.ctx, node.getAttribute('ng-selected')); if (selected) { node.setAttribute('selected', 'yes'); }
} // ng-text will assign text to node no need for escaping if (node.getAttribute('ng-text')) {
node.innerText = _getValue(node.ctx, node.getAttribute('ng-text'));
} // ng-class will simply assign class from defined property if (node.getAttribute('ng-class')) {
var classVal = _getValue(node.ctx, node.getAttribute('ng-class')); if (classVal) { node.className += ' ' + classVal; }
} // ng-show shows elements depending on true-finess of the value if (node.getAttribute('ng-show')) {
var isVisible = _getValue(node.ctx, node.getAttribute('ng-show'));
![Page 23: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/23.jpg)
23
node.ctx = node.ctx || node.parentNode.ctx || ctx;
// ng-scope allows you to change scope of the node (new scope can be any property of old scope) if (node.getAttribute('ng-scope')) {
node.ctx = _getValue(node.ctx, node.getAttribute('ng-scope'));
} // ng-loop will repeat first child (TODO: reapeat content) and assign correct context if (node.getAttribute('ng-loop')) {
var child = node.children[0]; var array = _getValue(node.ctx, node.getAttribute('ng-loop')) || []; node.removeChild(child); array.forEach((item) => { child = child.cloneNode(true); child.ctx = item; node.appendChild(child); });
} // ng-value will assign value to node if (node.getAttribute('ng-value')) {
node.value = _getValue(node.ctx, node.getAttribute('ng-value'));
} // ng-selected will set selected attribute depending on true-finess of value if (node.getAttribute('ng-selected')) {
var selected = _getValue(node.ctx, node.getAttribute('ng-selected'));
![Page 24: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/24.jpg)
24
} // ng-change will add "change" event handler if (node.getAttribute('ng-change')) { // closure to rescue ((node)=> { node.addEventListener('change', (event) => { eventHandlerObject[node.getAttribute(‘ng-change')] .bind(eventHandlerObject)(node.ctx, event); }, true); })(node); } // ng-click will add "click" event handler if (node.getAttribute('ng-click')) { // closure to rescue ((node)=> { node.addEventListener('click', (event) => { eventHandlerObject[node.getAttribute(‘ng-click')]
.bind(eventHandlerObject)(node.ctx, event); }, true); })(node); } }
return container; }
function _getValue(ctx, attrVal) { if (attrVal === 'self') { return ctx; }
return ctx[attrVal];
![Page 25: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/25.jpg)
25
} // ng-hide shows elements depending on false-iness of the value if (node.getAttribute('ng-hide')) {
var isHidden = _getValue(node.ctx, node.getAttribute('ng-hide')); if (isHidden) { node.style.display = 'none'; }
} // ng-change will add "change" event handler if (node.getAttribute('ng-change')) { // closure to rescue ((node)=> { node.addEventListener('change', (event) => { eventHandlerObject[node.getAttribute(‘ng-change')] .bind(eventHandlerObject)(node.ctx, event); }, true); })(node); } // ng-click will add "click" event handler if (node.getAttribute('ng-click')) { // closure to rescue ((node)=> { node.addEventListener('click', (event) => { eventHandlerObject[node.getAttribute(‘ng-click')]
.bind(eventHandlerObject)(node.ctx, event); }, true); })(node); } }
![Page 26: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/26.jpg)
26
[]
()
[()]
![Page 27: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/27.jpg)
27
[property]=‘value’ -> property=‘value’
()
[()]
![Page 28: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/28.jpg)
28
[property]=‘value’ -> property=‘value’
(event)=‘handler()’ -> on-event=‘handler()’
[()]
![Page 29: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/29.jpg)
29
[property]=‘value’ -> property=‘value’
(event)=‘handler()’ -> on-event=‘handler()’
[(target)]=‘value’ -> on-change=‘update()’ -> target=‘value’
![Page 30: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/30.jpg)
30
bind-property=‘value’ -> property=‘value’
(event)=‘handler()’ -> on-event=‘handler()’
[(target)]=‘value’ -> on-change=‘update()’ -> target=‘value’
![Page 31: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/31.jpg)
31
bind-property=‘value’ -> property=‘value’
on-event=‘handler()’ -> on-event=‘handler()’
[(target)]=‘value’ -> on-change=‘update()’ -> target=‘value’
![Page 32: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/32.jpg)
32
bind-property=‘value’ -> property=‘value’
on-event=‘handler()’ -> on-event=‘handler()’
bindon-prop=‘value’ -> on-change=‘update()’ -> target=‘value’
![Page 33: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/33.jpg)
33
<hero-detail *ngIf="currentHero" [hero]="currentHero"/>
![Page 34: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/34.jpg)
34
<hero-detail template="ngIf:currentHero" [hero]="currentHero"/>
![Page 35: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/35.jpg)
35
<template [ngIf]="currentHero"> <hero-detail [hero]="currentHero"></hero-detail> </template>
![Page 36: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/36.jpg)
System.js & JSPM & System.js Builder
36
http://plnkr.co/
![Page 37: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/37.jpg)
System.js & JSPM & System.js Builder
37
<title>angular2 playground</title> <link rel="stylesheet" href="style.css" /> <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="config.js"></script> <script> System.import('app') .catch(console.error.bind(console)); </script> </head>
![Page 38: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/38.jpg)
System.js & JSPM & System.js Builder
38
<title>angular2 playground</title> <link rel="stylesheet" href="style.css" /> <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="config.js"></script> <script> System.import('app') .catch(console.error.bind(console)); </script> </head>
![Page 39: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/39.jpg)
39
System.config({ //use typescript for compilation transpiler: 'typescript', //typescript compiler options typescriptOptions: { emitDecoratorMetadata: true }, //map tells the System loader where to look for things map: { app: "./src", '@angular': 'https://npmcdn.com/@angular', 'rxjs': 'https://npmcdn.com/[email protected]' }, //packages defines our app package packages: { app: { main: './main.ts', defaultExtension: 'ts' }, '@angular/core': { main: 'core.umd.js', defaultExtension: 'js' }, '@angular/compiler': { main: 'compiler.umd.js', defaultExtension: 'js' }, '@angular/common': { main: 'common.umd.js', defaultExtension: 'js' }, '@angular/platform-browser-dynamic': { main: 'platform-browser-dynamic.umd.js', defaultExtension: 'js' }, '@angular/platform-browser': { main: 'platform-browser.umd.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } });
![Page 40: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/40.jpg)
40
System.config({ //use typescript for compilation transpiler: 'typescript', //typescript compiler options typescriptOptions: { emitDecoratorMetadata: true }, //map tells the System loader where to look for things map: { app: "./src", '@angular': 'https://npmcdn.com/@angular', 'rxjs': 'https://npmcdn.com/[email protected]' }, //packages defines our app package packages: { app: { main: './main.ts', defaultExtension: 'ts' }, '@angular/core': { main: 'core.umd.js', defaultExtension: 'js' }, '@angular/compiler': { main: 'compiler.umd.js', defaultExtension: 'js' }, '@angular/common': { main: 'common.umd.js', defaultExtension: 'js' }, '@angular/platform-browser-dynamic': { main: 'platform-browser-dynamic.umd.js', defaultExtension: 'js' }, '@angular/platform-browser': { main: 'platform-browser.umd.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } });
44 строчки конфига
![Page 41: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/41.jpg)
Не хуже чем Webpack• Официальный Angular QuickStart репозиторий • Angular CLI • Yoman / Slush - генераторы
![Page 42: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/42.jpg)
TypeScript
42
![Page 43: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/43.jpg)
TypeScript
43
![Page 44: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/44.jpg)
TypeScript
44
![Page 45: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/45.jpg)
TypeScript
45
• .Net, Java, Scala background • SOLID, Design Patterns • 1.8.10 • Poor documentation - «google search ftw»
![Page 46: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/46.jpg)
Глава №3 - Добыча
46
![Page 47: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/47.jpg)
Размер
47
Development
Production
Size in KB
0 50 100 150 200 250 300 350 400
React Angular 1 Angular 2
![Page 48: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/48.jpg)
Размер - Angular 2 Router
48
![Page 49: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/49.jpg)
Размер - Angular 2 Router
49
![Page 50: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/50.jpg)
Размер - Angular 2 Router
50
![Page 51: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/51.jpg)
CSS
51
import {Component} from '@angular/core'
@Component({ selector: 'my-app', providers: [], styles: [` h2 { color: red; } `], template: ` <div> <h2>Hello {{name}}</h2> </div> `, directives: [] }) export class App { constructor() { this.name = 'Angular2 (Release Candidate!)' } }
![Page 52: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/52.jpg)
CSS
52
import {Component} from '@angular/core'
@Component({ selector: 'my-app', providers: [], styles: [` body { color: red; } `], template: ` <div> <h2>Hello {{name}}</h2> </div> `, directives: [] }) export class App { constructor() { this.name = 'Angular2 (Release Candidate!)' } }
![Page 53: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/53.jpg)
CSS
53
![Page 54: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/54.jpg)
Speed - templates
54
![Page 55: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/55.jpg)
55
import { Component } from '@angular/core';
@Component({ moduleId: module.id, selector: 'project-name-app', template: ` <h1> {{title}} </h1> `, styleUrls: ['project-name.component.css'] }) export class PROJECTNAMEAppComponent { title = 'project-name works!'; }
![Page 56: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/56.jpg)
56
new jit_StaticNodeDebugInfo0([],null,{}), new jit_StaticNodeDebugInfo0([],null,{}), new jit_StaticNodeDebugInfo0([],null,{}) ] ; var renderType_PROJECTNAMEAppComponent = null; function _View_PROJECTNAMEAppComponent0(viewUtils,parentInjector,declarationEl) { var self = this; jit_DebugAppView1.call(this, _View_PROJECTNAMEAppComponent0,renderType_PROJECTNAMEAppComponent,jit_ViewType_COMPONENT2,viewUtils,parentInjector,declarationEl,jit_ChangeDetectionStrategy_CheckAlways3,nodeDebugInfos_PROJECTNAMEAppComponent0); } _View_PROJECTNAMEAppComponent0.prototype = Object.create(jit_DebugAppView1.prototype); _View_PROJECTNAMEAppComponent0.prototype.createInternal = function(rootSelector) { var self = this; var parentRenderNode = self.renderer.createViewRoot(self.declarationAppElement.nativeElement); self._el_0 = self.renderer.createElement(parentRenderNode,'h1',self.debug(0,0,0)); self._text_1 = self.renderer.createText(self._el_0,'',self.debug(1,0,4)); self._text_2 = self.renderer.createText(parentRenderNode,'\n',self.debug(2,2,5)); self._expr_0 = jit_uninitialized4; self.init([],[ self._el_0, self._text_1, self._text_2 ] ,[],[]); return null; }; _View_PROJECTNAMEAppComponent0.prototype.detectChangesInternal = function(throwOnChange) { var self = this; self.detectContentChildrenChanges(throwOnChange); self.debug(1,0,4); var currVal_0 = jit_interpolate5(1,'\n ',self.context.title,'\n');
![Page 57: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/57.jpg)
57
new jit_StaticNodeDebugInfo0([],null,{}), new jit_StaticNodeDebugInfo0([],null,{}), new jit_StaticNodeDebugInfo0([],null,{}) ] ; var renderType_PROJECTNAMEAppComponent = null; function _View_PROJECTNAMEAppComponent0(viewUtils,parentInjector,declarationEl) { var self = this; jit_DebugAppView1.call(this, _View_PROJECTNAMEAppComponent0,renderType_PROJECTNAMEAppComponent,jit_ViewType_COMPONENT2,viewUtils,parentInjector,declarationEl,jit_ChangeDetectionStrategy_CheckAlways3,nodeDebugInfos_PROJECTNAMEAppComponent0); } _View_PROJECTNAMEAppComponent0.prototype = Object.create(jit_DebugAppView1.prototype); _View_PROJECTNAMEAppComponent0.prototype.createInternal = function(rootSelector) { var self = this; var parentRenderNode = self.renderer.createViewRoot(self.declarationAppElement.nativeElement); self._el_0 = self.renderer.createElement(parentRenderNode,'h1',self.debug(0,0,0)); self._text_1 = self.renderer.createText(self._el_0,'',self.debug(1,0,4)); self._text_2 = self.renderer.createText(parentRenderNode,'\n',self.debug(2,2,5)); self._expr_0 = jit_uninitialized4; self.init([],[ self._el_0, self._text_1, self._text_2 ] ,[],[]); return null; }; _View_PROJECTNAMEAppComponent0.prototype.detectChangesInternal = function(throwOnChange) { var self = this; self.detectContentChildrenChanges(throwOnChange); self.debug(1,0,4); var currVal_0 = jit_interpolate5(1,'\n ',self.context.title,'\n');
![Page 58: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/58.jpg)
58
self.renderer.createElement
self.renderer.createText
![Page 59: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/59.jpg)
59
Как построить DOMРоман Дворнов
![Page 60: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/60.jpg)
Speed immutability
60
import { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'isOdd' }) export class IsOddPipe implements PipeTransform { transform(array:any[]) { return array.filter(item => item.isOdd); } }
@Component({ moduleId: module.id, selector: 'project-name-app', pipes: [IsOddPipe], template: ` <button (click)="add()">add</button> <div> <div *ngFor="let item of list | isOdd"> {{ item.name }} </div> </div> `, styleUrls: ['project-name.component.css'] }) export class PROJECTNAMEAppComponent { list = [] add() { this.list.push({ name: ‘test', isOdd: !!(this.list.length % 2) }) } }
![Page 61: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/61.jpg)
Speed immutability
61
import { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'isOdd' }) export class IsOddPipe implements PipeTransform { transform(array:any[]) { return array.filter(item => item.isOdd); } }
@Component({ moduleId: module.id, selector: 'project-name-app', pipes: [IsOddPipe], template: ` <button (click)="add()">add</button> <div> <div *ngFor="let item of list | isOdd"> {{ item.name }} </div> </div> `, styleUrls: ['project-name.component.css'] }) export class PROJECTNAMEAppComponent { list = [] add() { this.list.push({ name: ‘test', isOdd: !!(this.list.length % 2) }) } }
![Page 62: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/62.jpg)
Speed immutability
62
import { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'isOdd' }) export class IsOddPipe implements PipeTransform { transform(array:any[]) { return array.filter(item => item.isOdd); } }
@Component({ moduleId: module.id, selector: 'project-name-app', pipes: [IsOddPipe], template: ` <button (click)="add()">add</button> <div> <div *ngFor="let item of list | isOdd"> {{ item.name }} </div> </div> `, styleUrls: ['project-name.component.css'] }) export class PROJECTNAMEAppComponent { list = [] add() { this.list.push({ name: ‘test', isOdd: !!(this.list.length % 2) }) } }
![Page 63: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/63.jpg)
Speed immutability
63
import { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: ‘isOdd’, is_pure: false }) export class IsOddPipe implements PipeTransform { transform(array:any[]) { return array.filter(item => item.isOdd); } }
@Component({ moduleId: module.id, selector: 'project-name-app', pipes: [IsOddPipe], template: ` <button (click)="add()">add</button> <div> <div *ngFor="let item of list | isOdd"> {{ item.name }} </div> </div> `, styleUrls: ['project-name.component.css'] }) export class PROJECTNAMEAppComponent { list = [] add() { this.list.push({ name: ‘test', isOdd: !!(this.list.length % 2) }) } }
![Page 64: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/64.jpg)
Speed immutability
64
import { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'isOdd' }) export class IsOddPipe implements PipeTransform { transform(array:any[]) { return array.filter(item => item.isOdd); } }
@Component({ moduleId: module.id, selector: 'project-name-app', pipes: [IsOddPipe], template: ` <button (click)="add()">add</button> <div> <div *ngFor="let item of list | isOdd"> {{ item.name }} </div> </div> `, styleUrls: ['project-name.component.css'] }) export class PROJECTNAMEAppComponent { list = [] add() { this.list = this.list.splice().filter((i) => i % 2) }) } }
![Page 65: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/65.jpg)
Speed - zone.js
65
Zone.fork().run(function () { zone.inTheZone = true;
setTimeout(function () { console.log('in the zone: ' + !!zone.inTheZone); }, 0); });
console.log('in the zone: ' + !!zone.inTheZone);
————————————————————————————— 'in the zone: false' 'in the zone: true'
![Page 66: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/66.jpg)
Speed - zone.js
66
Zone.fork().run(function () { zone.inTheZone = true;
setTimeout(function () { console.log('in the zone: ' + !!zone.inTheZone); }, 0); });
console.log('in the zone: ' + !!zone.inTheZone);
————————————————————————————— 'in the zone: false' 'in the zone: true'
![Page 67: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/67.jpg)
TypeScript OOP
67
class GenericService<T> { items: Array<T> = []
addItem(item: T) { this.items.push(item) } }
interface User { id: number, name: string }
interface Creatives { type: string, value: string }
![Page 68: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/68.jpg)
TypeScript OOP
68
var s = new GenericService<User>(); s.addItem({ id: 1, name: 'asda' });
s.addItem({ type: ‘asda' // will fail })
![Page 69: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/69.jpg)
Глава №4 - Первые потери
69
… а вот этого я не ожидал
![Page 70: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/70.jpg)
Потеря почти всей кодовой базы
70
![Page 71: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/71.jpg)
Promise -> RXJS
71
![Page 72: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/72.jpg)
Promise -> RXJS
72
ЗДЕСЬ БЫЛ PROMISE
![Page 73: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/73.jpg)
Promise -> RXJS
73
import {Http, HTTP_PROVIDERS} from 'angular2/http'; @Component({ selector: 'http-app', viewProviders: [HTTP_PROVIDERS], templateUrl: 'people.html' }) class PeopleComponent { constructor(http: Http) { http.get('people.json') .map(res => res.json()) .subscribe(people => this.people = people); } }
![Page 74: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/74.jpg)
Promise -> RXJS
74
import {Http, HTTP_PROVIDERS} from 'angular2/http'; @Component({ selector: 'http-app', viewProviders: [HTTP_PROVIDERS], templateUrl: 'people.html' }) class PeopleComponent { constructor(http: Http) { http.get('people.json') .map(res => res.json()) .subscribe(people => this.people = people); } }
![Page 75: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/75.jpg)
Promise -> RXJS
75
import {Http, HTTP_PROVIDERS} from 'angular2/http'; @Component({ selector: 'http-app', viewProviders: [HTTP_PROVIDERS], templateUrl: 'people.html' }) class PeopleComponent { constructor(http: Http) { http.get('people.json') .map(res => res.json()) .subscribe(people => this.people = people); } }
![Page 76: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/76.jpg)
RXJS
76
![Page 77: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/77.jpg)
RXJS
77
interface IObservable<T> { IDisposable Subscribe(IObserver observer); }
interface IObserver<T> { void OnCompleted(); void OnNext(T value); void OnError(Exception e); }
![Page 78: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/78.jpg)
ngResources
78
var User = $resource('/user/:userId', {userId:'@id'}); User.get({userId:123}, function(user) { user.abc = true; user.$save(); });
![Page 79: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/79.jpg)
ngResources
79
var User = $resource('/user/:userId', {userId:'@id'}); User.get({userId:123}, function(user) { user.abc = true; user.$save(); });
![Page 80: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/80.jpg)
Встроенные паттерны канули в небытие!
80
1) component 2) directive 3) filter 4) service 5) provider 6) constant 7) config 8) run 9) module
![Page 81: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/81.jpg)
Встроенные паттерны канули в небытие!
81
1) component 2) template 3) directive 4) route 5) pipe 6) service *
![Page 82: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/82.jpg)
Формы
82
1) [(ngModel)]
![Page 83: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/83.jpg)
Формы
83
1) [(ngModel)] 2) ng-valid | ng-invalid | ng-dirty | ng-pristine | ng-touched | ng-untouched
![Page 84: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/84.jpg)
Формы
84
1) [(ngModel)] 2) ng-valid | ng-invalid | ng-dirty | ng-pristine | ng-touched | ng-untouched 3) FormModel + FormBuilder
![Page 85: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/85.jpg)
Формы
85
1) [(ngModel)] 2) ng-valid | ng-invalid | ng-dirty | ng-pristine | ng-touched | ng-untouched 3) FormModel + FormBuilder 4) Валидация не стала легче
![Page 86: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/86.jpg)
Глава №5 - Happy End
86
![Page 87: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/87.jpg)
Мы уже переехали на Angular 2?
87
![Page 88: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/88.jpg)
НЕТ88
![Page 89: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/89.jpg)
Почему?
89
1) Потому что Angular 1 не так уж и плох, а если задуматься …
![Page 90: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/90.jpg)
Почему?
90
1) Потому что Angular 1 не так уж и плох, а если задуматься … 2) Потому что React 15 не так уж и плох, а если задуматься …
![Page 91: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/91.jpg)
Почему?
91
1) Потому что Angular 1 не так уж и плох, а если задуматься … 2) Потому что React 15 не так уж и плох, а если задуматься … 3) Потому что Ember не так уж и плох, а если задуматься …
![Page 92: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/92.jpg)
Почему?
92
1) Кодовая база 2) Уровень вхождения 3) Незаконченность*
![Page 93: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/93.jpg)
Почему?
93
1) Кодовая база 2) Уровень вхождения 3) Незаконченность*
![Page 94: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/94.jpg)
Есть ли надежда?
94
![Page 95: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/95.jpg)
Наши шаги
95
1) TypeScript OOP - e2e tests 2) Angular 1.4.x -> 1.5.x 3) AutoNgConverter
![Page 96: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/96.jpg)
О чем мы не поговорили?
96
![Page 97: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/97.jpg)
97
Progressive Web Apps
Native - Ionic Framework, - NativeScript - React Native.
Desktop - Electron
Universal - node.js, - .NET, - PHP
Dependency Injection
Angular CLI
IDEs
Testing - patched Karma, Protractor
Animation
Accessibility
Developer Tools
![Page 98: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/98.jpg)
98
-Redux ( ngrx / ng2-redux ) -FLUX -MV* ( MVC, MVP, MVVM ) -MALEVICH ( COD.js )
![Page 99: Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей Охрименко (IPONWEB)](https://reader031.vdocuments.pub/reader031/viewer/2022020108/586f8f591a28ab54768b753d/html5/thumbnails/99.jpg)
Приятного аппетита!
Tweeter: #Ai_boy Gitter: aiboy
99
http://bit.ly/1XP0dEh