![Page 1: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/1.jpg)
![Page 2: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/2.jpg)
![Page 3: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/3.jpg)
![Page 4: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/4.jpg)
![Page 5: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/5.jpg)
![Page 6: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/6.jpg)
![Page 7: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/7.jpg)
![Page 8: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/8.jpg)
![Page 9: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/9.jpg)
![Page 10: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/10.jpg)
<parent prop1="exp1" prop2="exp2">
<child prop3="exp3" prop4="exp4"></child>
</parent>
![Page 11: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/11.jpg)
<parent prop1="exp1" prop2="exp2">
<child prop3="exp3" prop4="exp4"></child>
</parent>
![Page 12: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/12.jpg)
![Page 13: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/13.jpg)
![Page 14: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/14.jpg)
![Page 15: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/15.jpg)
while (op) {
const getter = getterFor(op.fieldName);
const oldValue = op.value;
const newValue = getter(op.context);
if (oldValue !== newValue) {
op.value = newValue;
const fn = reactionFunctionFor(op);
fn(oldValue, newValue);
}
op = op.next;
}
<formatted-rating [rating]="talk.rating"/>
![Page 16: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/16.jpg)
const talk = obj.talk;
const rating = talk.rating;
if (rating !== this.previousRating) {
this.previousRating = rating;
this.formattedRatingComponent.rating = rating;
}
<formatted-rating [rating]="talk.rating"/>
![Page 17: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/17.jpg)
<formatted-rating [rating]="talk.rating"/>
class Talk_ChangeDetector {
//...
detectChanges() {
//...
const talk = obj.talk;
const rating = talk.rating;
if (rating !== this.previousRating) {
this.previousRating = rating;
this.formattedRatingComponent.rating = rating;
}
}
}
![Page 18: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/18.jpg)
![Page 19: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/19.jpg)
![Page 20: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/20.jpg)
![Page 21: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/21.jpg)
![Page 22: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/22.jpg)
![Page 23: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/23.jpg)
•
•
•
•
•
![Page 24: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/24.jpg)
![Page 25: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/25.jpg)
![Page 26: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/26.jpg)
![Page 27: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/27.jpg)
//code
a();
setTimeout(b, 0);
setTimeout(c, 0);
d();
//run order
a
d
b // async
c // async
b
c
![Page 28: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/28.jpg)
//code
start();
a();
setTimeout(b, 0);
setTimeout(c, 0);
d();
stop();
// start
a
d
// stop
b // missed
c // missed
![Page 29: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/29.jpg)
start();
a();
d();
end();
start();
b();
end();
start();
c();
end();
![Page 30: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/30.jpg)
onZoneEnter();
a();
d();
onZoneLeave();
onZoneEnter();
b();
onZoneLeave();
onZoneEnter();
c();
onZoneLeave();
![Page 31: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/31.jpg)
•
•
•
•
![Page 32: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/32.jpg)
•
•
•
•
![Page 33: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/33.jpg)
![Page 34: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/34.jpg)
socket.on('data', (data) => {
model.data = data;
$scope.$apply();
});
![Page 35: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/35.jpg)
![Page 37: Angular2 Change Detection, Тимофей Яценко, MoscowJS 31](https://reader034.vdocuments.mx/reader034/viewer/2022051520/586f8fdc1a28ab54768b7799/html5/thumbnails/37.jpg)