![Page 1: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/1.jpg)
Angularконфигурируем до неузнаваемости
1
![Page 2: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/2.jpg)
АЛЕКСЕЙ ОХРИМЕНКО
TWITTER: AI_BOY
setInterval(learnJavaScript)2
![Page 3: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/3.jpg)
![Page 4: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/4.jpg)
![Page 5: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/5.jpg)
![Page 6: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/6.jpg)
![Page 7: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/7.jpg)
![Page 8: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/8.jpg)
?
![Page 9: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/9.jpg)
IPONWEB
9
![Page 10: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/10.jpg)
10
![Page 11: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/11.jpg)
Awesome Telegram RUhttps://github.com/aiboy/awesome-telegram-ru
![Page 12: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/12.jpg)
Какое важное событие было на прошлой
неделе?
![Page 13: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/13.jpg)
5 лет
![Page 14: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/14.jpg)
![Page 15: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/15.jpg)
Angular >= 2.xAngularJs < 2.x
![Page 16: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/16.jpg)
4.2.3
![Page 17: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/17.jpg)
Angular, Angular… нас и [НАШ_FRAMEWORK]
неплохо кормит
17
![Page 18: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/18.jpg)
18
![Page 19: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/19.jpg)
Angular
![Page 20: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/20.jpg)
20
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 21: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/21.jpg)
21
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 22: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/22.jpg)
22
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 23: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/23.jpg)
![Page 24: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/24.jpg)
![Page 25: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/25.jpg)
Синтаксис Шаблонов
25
![Page 26: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/26.jpg)
/** * 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')) {
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'));
26
![Page 27: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/27.jpg)
/** * 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')) {
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'));
27
![Page 28: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/28.jpg)
/** * 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')) {
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'));
28
![Page 29: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/29.jpg)
} // 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')); if (!isVisible) { node.style.display = 'none'; }
} // 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'; }
}
29
![Page 30: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/30.jpg)
30
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')); 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')) {
![Page 31: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/31.jpg)
31
// 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); } }
return container; }
function _getValue(ctx, attrVal) { if (attrVal === 'self') { return ctx; }
return ctx[attrVal]; }
![Page 32: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/32.jpg)
32
// 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 33: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/33.jpg)
33
[]
()
[()]
![Page 34: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/34.jpg)
34
[property]=‘value’ -> property=‘value’
()
[()]
![Page 35: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/35.jpg)
35
[property]=‘value’ -> property=‘value’
(event)=‘handler()’ -> on-event=‘handler()’
[()]
![Page 36: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/36.jpg)
36
[property]=‘value’ -> property=‘value’
(event)=‘handler()’ -> on-event=‘handler()’
[(target)]=‘value’ -> on-change=‘update()’ -> target=‘value’
![Page 37: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/37.jpg)
37
bind-property=‘value’ -> property=‘value’
(event)=‘handler()’ -> on-event=‘handler()’
[(target)]=‘value’ -> on-change=‘update()’ -> target=‘value’
![Page 38: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/38.jpg)
38
bind-property=‘value’ -> property=‘value’
on-event=‘handler()’ -> on-event=‘handler()’
[(target)]=‘value’ -> on-change=‘update()’ -> target=‘value’
![Page 39: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/39.jpg)
39
bind-property=‘value’ -> property=‘value’
on-event=‘handler()’ -> on-event=‘handler()’
bindon-prop=‘value’ -> on-change=‘update()’ -> target=‘value’
![Page 40: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/40.jpg)
class MovieItem extends React.Component {
componentDidMount() { this.nv.addEventListener("nv-enter", this.handleNvEnter); }
componentWillUnmount() { this.nv.removeEventListener("nv-enter", this.handleNvEnter); }
handleNvEnter = (event) => { console.log("Nv Enter:", event); }
}
![Page 41: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/41.jpg)
<div (nv-enter)="HandleEvent()"></div>
![Page 42: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/42.jpg)
![Page 43: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/43.jpg)
Как конфигурировать?
43
![Page 44: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/44.jpg)
Как конфигурировать?
• «Встроенные» настройки
44
![Page 45: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/45.jpg)
Как конфигурировать?
• «Встроенные» настройки
• Dependency Injection (Providers)
45
![Page 46: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/46.jpg)
Как конфигурировать?
• «Встроенные» настройки
• Dependency Injection (Providers)
• Platforms
46
![Page 47: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/47.jpg)
Что такое DI?
https://www.youtube.com/watch?v=wi3wPzReKZQ
S.O.L.I.D-ый JavaScript
![Page 48: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/48.jpg)
class Car { constructor() { this.engine = new Engine(); this.tires = Tires.getInstance(); this.doors = app.get('doors'); } }
![Page 49: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/49.jpg)
class Car { constructor(engine, tires, doors) { this.engine = engine; this.tires = tires; this.doors = doors; } }
![Page 50: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/50.jpg)
var car = new Car( new Engine(), new Tires(), new Doors() );
var car = new Car( new MockEngine(), new MockTires(), new MockDoors() );
![Page 51: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/51.jpg)
Angular Dependency Injection
![Page 52: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/52.jpg)
var injector = Injector.resolveAndCreate([ Car, Engine, Tires, Doors ]);
![Page 53: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/53.jpg)
var injector = Injector.resolveAndCreate([ { provide: Car, useClass: Car }, { provide: Engine, useClass: Engine }, { provide: Tires, useClass: Tires }, { provide: Doors, useClass: Doors } ]);
![Page 54: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/54.jpg)
import { Inject } from 'angular2/core';
class Car { constructor( @Inject(Engine) engine, @Inject(Tires) tires, @Inject(Doors) doors ) { ... } }
![Page 55: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/55.jpg)
Можно ли заменить DI или вообще им не пользоваться?
55
![Page 56: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/56.jpg)
НЕТ@angular/core
56
![Page 57: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/57.jpg)
Angular
Componen
![Page 58: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/58.jpg)
Angular
ModuleComponen
![Page 59: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/59.jpg)
Angular
ModuleComponen
Platform
![Page 60: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/60.jpg)
Angular
ModuleComponen
Platform
ModuleCom
![Page 61: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/61.jpg)
WebWorkers
61
![Page 62: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/62.jpg)
import {bootstrapWorkerUi} from '@angular/platform-webworker'; import {enableProdMode} from '@angular/core';
export function main() { enableProdMode(); bootstrapWorkerUi('loader.js'); }
62
![Page 63: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/63.jpg)
import {bootstrapWorkerUi} from '@angular/platform-webworker'; import {enableProdMode} from '@angular/core';
export function main() { enableProdMode(); bootstrapWorkerUi('loader.js'); }
63
![Page 64: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/64.jpg)
@NgModule({ imports: [WorkerAppModule], bootstrap: [AppComponent], declarations: [AppComponent] }) class WebWorkerModule {}
export function main() { enableProdMode(); platformWorkerAppDynamic().bootstrapModule(WebWorkerModule); }
64
![Page 65: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/65.jpg)
@NgModule({ imports: [WorkerAppModule], bootstrap: [AppComponent], declarations: [AppComponent] }) class WebWorkerModule {}
export function main() { enableProdMode(); platformWorkerAppDynamic().bootstrapModule(WebWorkerModule); }
65
![Page 66: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/66.jpg)
![Page 67: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/67.jpg)
https://docs.nativescript.org/tutorial/ng-chapter-0
import { Component } from "@angular/core";
@Component({ selector: "my-app", template: ` <ActionBar title="My Apple" class="action-bar"></ActionBar> <Image src="~/images/apple.jpg"></Image> `, styles: [` @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360); } } Image { animation-name: spin; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; } `]})export class AppComponent {}
![Page 68: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/68.jpg)
https://github.com/vakrilov/native-script-accelerometer/blob/master/index.ios.ts
var queue = NSOperationQueue.alloc().init(); accManager.startAccelerometerUpdatesToQueueWithHandler(queue, (data, error) => { dispatch_async(main_queue, () => { wrappedCallback({ x: data.acceleration.x, y: data.acceleration.y, z: data.acceleration.z }) }) });
![Page 69: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/69.jpg)
https://github.com/vakrilov/native-script-accelerometer/blob/master/index.ios.ts
var queue = NSOperationQueue.alloc().init(); accManager.startAccelerometerUpdatesToQueueWithHandler(queue, (data, error) => { dispatch_async(main_queue, () => { wrappedCallback({ x: data.acceleration.x, y: data.acceleration.y, z: data.acceleration.z }) }) });
![Page 70: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/70.jpg)
HTML
70
![Page 71: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/71.jpg)
•PUG/Jade •Mustache •STAN •etc…
71
![Page 72: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/72.jpg)
https://github.com/tycho01/pug-plugin-ng
module.exports = { // your config settings ... module: [ //your modules... loaders: [ { test: /\.pug/, loader: 'pug-html', query: { doctype: 'html', plugins: [require('pug-plugin-ng')] }, }, ] ] };
@Component({ selector: 'app', templateUrl: './app.template.pug' })
72
![Page 73: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/73.jpg)
https://github.com/tycho01/pug-plugin-ng
module.exports = { // your config settings ... module: [ //your modules... loaders: [ { test: /\.pug/, loader: 'pug-html', query: { doctype: 'html', plugins: [require('pug-plugin-ng')] }, }, ] ] };
@Component({ selector: 'app', templateUrl: './app.template.pug' })
73
![Page 74: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/74.jpg)
ng-container([ngSwitch]='type') template([ngSwitchCase]=`'object'`) object([val]=`val` [schema]=`new_schema` [named]=`false`) template([ngSwitchCase]=`'array'`) array([val]=`val` [schema]=`new_schema` [named]=`false`) template([ngSwitchCase]=`'scalar'`) ng-container([ngSwitch]=`isHtml(val)`) template([ngSwitchCase]=`true`) myiframe([val]=`val`) template(ngSwitchDefault) .scalar([innerHtml]=`val | scalar:new_schema`) template(ngSwitchDefault) p UNIMPLEMENTED OUTPUT-VALUE TYPE ({{ type | json }})!
74
![Page 75: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/75.jpg)
<div class="blue-box"> <div class="blue-box-title">{{boxTitle}}</div> {{define "bob"}}This is the template bob{{end}} <span> <ng-content></ng-content> </span> </div>
75
![Page 76: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/76.jpg)
<div class="blue-box"> <div class="blue-box-title">{{boxTitle}}</div> {{define "bob"}}This is the template bob{{end}} <span> <ng-content></ng-content> </span> </div>
76
![Page 77: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/77.jpg)
<div class="blue-box"> <div class="blue-box-title">{{boxTitle}}</div> {{define "bob"}}This is the template bob{{end}} <span> <ng-content></ng-content> </span> </div>
ERROR
77
![Page 78: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/78.jpg)
<div class="blue-box"> <div class="blue-box-title">{{boxTitle}}</div> <div ngNonBindable> {{define "bob"}}This is the template bob{{end}} </div> <span> <ng-content></ng-content> </span> </div>
78
![Page 79: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/79.jpg)
class Parser2 extends Parser { myInterpolationRegexp = /\[\[([\s\S]*?)\]\]/g; // <- CUSTOMIZATION constructor(public _lexer: Lexer) { super(_lexer) } splitInterpolation(input, location):SplitInterpolation { var parts = StringWrapper.split(input, this.myInterpolationRegexp); // … code here return new SplitInterpolation(strings, expressions); } private _findInterpolationErrorColumn2(parts: string[], partInErrIdx: number): number { // … code here return errLocation.length; } }
79
![Page 80: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/80.jpg)
class Parser2 extends Parser { myInterpolationRegexp = /\[\[([\s\S]*?)\]\]/g; // <- CUSTOMIZATION constructor(public _lexer: Lexer) { super(_lexer) } splitInterpolation(input, location):SplitInterpolation { var parts = StringWrapper.split(input, this.myInterpolationRegexp); // … code here return new SplitInterpolation(strings, expressions); } private _findInterpolationErrorColumn2(parts: string[], partInErrIdx: number): number { // … code here return errLocation.length; } }
80
![Page 81: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/81.jpg)
class Parser2 extends Parser { myInterpolationRegexp = /\[\[([\s\S]*?)\]\]/g; // <- CUSTOMIZATION constructor(public _lexer: Lexer) { super(_lexer) } splitInterpolation(input, location):SplitInterpolation { var parts = StringWrapper.split(input, this.myInterpolationRegexp); // … code here return new SplitInterpolation(strings, expressions); } private _findInterpolationErrorColumn2(parts: string[], partInErrIdx: number): number { // … code here return errLocation.length; } }
81
![Page 82: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/82.jpg)
{ provide:Parser, useClass: Parser2 }
82
![Page 83: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/83.jpg)
<div>[[ title ]]</div> {{begin}} asdas {{#end}} <div> <div *ngFor="let item of list | isodd"> [[ item.name ]] </div> </div>
83
![Page 84: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/84.jpg)
<div>[[ title ]]</div> {{begin}} asdas {{#end}} <div> <div *ngFor="let item of list | isodd"> [[ item.name ]] </div> </div>
84
![Page 85: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/85.jpg)
CSS
85
![Page 86: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/86.jpg)
import {Component} from '@angular/core'
@Component({ selector: 'my-app', providers: [], styles: [` .test { color: red; } `], template: ` <div> <h2 class='test'>Hello {{name}}</h2> </div> `, directives: [] }) export class App { constructor() { this.name = 'Angular2 (Release Candidate!)' } }
86
![Page 87: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/87.jpg)
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!)' } }
87
![Page 88: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/88.jpg)
88
![Page 89: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/89.jpg)
ViewEncapsulation
• Emulated
89
![Page 90: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/90.jpg)
ViewEncapsulation
• Emulated
• Native
90
![Page 91: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/91.jpg)
ViewEncapsulation
• Emulated
• Native
• None
91
![Page 92: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/92.jpg)
import {Component} from '@angular/core'
@Component({ selector: 'my-app', providers: [], encapsulation: ViewEncapsulation.None styles: [` body { color: red; } `], template: ` <div> <h2>Hello {{name}}</h2> </div> `, directives: [] }) export class App { constructor() { this.name = 'Angular2 (Release Candidate!)' } }
92
![Page 94: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/94.jpg)
Language
94
![Page 95: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/95.jpg)
TypeScript
import { Component } from '@angular/core';
@Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
![Page 96: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/96.jpg)
ES2015 / ES6
import { Component } from '@angular/core';
@Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
![Page 97: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/97.jpg)
ES5(function(app) {
app.AppComponent = ng.core.Component({ selector: 'my-app', template: '<h1>Hello {{name}}</h1>' }) .Class({ constructor: function() { this.name = 'Angular' } });
})(window.app || (window.app = {}));
![Page 98: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/98.jpg)
Dart
![Page 99: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/99.jpg)
Speed
99
![Page 100: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/100.jpg)
100
Zone.js
![Page 101: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/101.jpg)
const http = require('http');
const hostname = '127.0.0.1'; const port = 3000;
const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World'); });
server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });
101
![Page 102: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/102.jpg)
102
![Page 103: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/103.jpg)
process.on('uncaughtException', (err) => { console.log(`Caught exception: ${err}`); });
103
![Page 104: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/104.jpg)
104
![Page 105: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/105.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); }
setTimeout(someCallback, 0);
105
![Page 106: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/106.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); }
setTimeout(someCallback, 0);
106
![Page 107: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/107.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); }
setTimeout(someCallback, 0);
107
![Page 108: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/108.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); }
setTimeout(someCallback, 0);
108
![Page 109: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/109.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); // TRUE }
setTimeout(someCallback, 0);
109
![Page 110: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/110.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); }
setTimeout(someCallback, 0);
110
![Page 111: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/111.jpg)
Zone.current.fork({}).run(function () { Zone.current.inTheZone = true; setTimeout(someCallback, 0); });
function someCallback() { console.log(Zone.current.inTheZone); // FALSE }
setTimeout(someCallback, 0);
111
![Page 112: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/112.jpg)
Change Detection
112
![Page 113: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/113.jpg)
113
![Page 114: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/114.jpg)
114
![Page 115: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/115.jpg)
115
![Page 116: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/116.jpg)
116
![Page 117: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/117.jpg)
117
![Page 118: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/118.jpg)
// very simplified version of actual source class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) { this.zone.onTurnDone .subscribe(() => {
this.zone.run(() => this.tick()) });
}
tick() { this.changeDetectorRefs .forEach((ref) => ref.detectChanges()); } }
118
![Page 119: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/119.jpg)
// very simplified version of actual source class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) { this.zone.onTurnDone .subscribe(() => {
this.zone.run(() => this.tick() });
}
tick() { this.changeDetectorRefs .forEach((ref) => ref.detectChanges()); } }
119
![Page 120: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/120.jpg)
// very simplified version of actual source class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) { this.zone.onTurnDone .subscribe(() => {
this.zone.run(() => this.tick() });
}
tick() { this.changeDetectorRefs .forEach((ref) => ref.detectChanges()); } }
120
![Page 121: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/121.jpg)
// very simplified version of actual source class ApplicationRef {
changeDetectorRefs:ChangeDetectorRef[] = [];
constructor(private zone: NgZone) { this.zone.onTurnDone .subscribe(() => {
this.zone.run(() => this.tick() });
}
tick() { this.changeDetectorRefs .forEach((ref) => ref.detectChanges()); } }
121
![Page 122: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/122.jpg)
122
![Page 123: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/123.jpg)
@Component({ template: '<v-card [vData]="vData"></v-card>' }) class VCardApp {
constructor() { this.vData = { name: 'Christoph Burgdorf', email: '[email protected]' } }
changeData() { this.vData.name = 'Pascal Precht'; } }
123
![Page 124: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/124.jpg)
@Component({ template: ` <h2>{{vData.name}}</h2> <span>{{vData.email}}</span> ` }) class VCardCmp { @Input() vData; }
124
![Page 125: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/125.jpg)
@Component({ template: '<v-card [vData]="vData"></v-card>' }) class VCardApp {
constructor() { this.vData = { name: 'Christoph Burgdorf', email: '[email protected]' } }
changeData() { this.vData = { name: 'Pascal Precht' }; } }
125
![Page 126: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/126.jpg)
@Component({ template: ` <h2>{{vData.name}}</h2> <span>{{vData.email}}</span> `, changeDetection: ChangeDetectionStrategy.OnPush }) class VCardCmp { @Input() vData; }
126
![Page 127: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/127.jpg)
127
![Page 128: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/128.jpg)
Управляем Zone и CD
128
![Page 129: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/129.jpg)
constructor(private zone: NgZone) {}
129
![Page 130: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/130.jpg)
processOutsideAngularZone() { this.progress = 0; this.zone.runOutsideAngular(() => { this.increaseProgress(() => { this.zone.run(() => { console.log('Outside Done!'); }); }); }); }
130
![Page 131: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/131.jpg)
processOutsideAngularZone() { this.progress = 0; this.zone.runOutsideAngular(() => { this.increaseProgress(() => { this.zone.run(() => { console.log('Outside Done!'); }); }); }); }
131
![Page 132: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/132.jpg)
constructor(private cd: ChangeDetectorRef) {}
132
![Page 133: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/133.jpg)
ngOnInit() { this.addItemStream.subscribe(() => { this.counter++; // application state changed this.cd.markForCheck(); // marks path }) } }
133
![Page 134: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/134.jpg)
https://hackernoon.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f
134
![Page 135: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/135.jpg)
ROUTER
![Page 136: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/136.jpg)
export class CustomUrlSerializer implements UrlSerializer { /** Parses a url into a {@link UrlTree} */ parse(url: string): UrlTree { const p = new CustomUrlParser(url); const UrlTree2 = UrlTree; return eval('new UrlTree2(p.parseRootSegment(), p.parseQueryParams(), p.parseFragment())'); }
/** Converts a {@link UrlTree} into a url */ serialize(tree: UrlTree): string { const segment = `/${serializeSegment(tree.root, true)}`; const query = serializeQueryParams(tree.queryParams); const fragment = tree.fragment !== null && tree.fragment !== undefined ? `#${encodeURI(tree.fragment)}` : ''; return `${segment}${query}${fragment}`; } }
![Page 137: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/137.jpg)
providers: [ {provide: UrlSerializer, useClass: CustomUrlSerializer}, ],
![Page 138: конфигурируем до неузнаваемости · 2017-06-17 · * Simplest possible template in AngularJs-ISH style * * @param {String} template - template string *](https://reader030.vdocuments.mx/reader030/viewer/2022041015/5ec6b89bdc1b4b11c75887fc/html5/thumbnails/138.jpg)
THE END
138