Angular наносит
ответный удар
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1876868/shield-large_2x.png)
О себе
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1876884/0V0A4518.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1877140/21789100063_933c90a592_b.jpg)
AngularConnect
Итак, Angular 1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1877007/file000439007320.jpg)
2009
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1877043/angularjs-logo.png)
Время шло...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1877027/yarmosky-old-aged-man-woman-relationships-superhero-batman-funny-painting.jpg)
Сложный
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1881572/crying-face.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1881573/crying_emoji_sticker-rb75d6c188de5470cb40ded9ccfeb4f1f_v9waf_8byvr_324.jpg)
Медленный
Куда уходить?
React
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1877035/react-logo-1000-transparent.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1877056/shield-large_2x.png)
2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1877056/shield-large_2x.png)
2
Скорость
Скорость
Change Detection Angular 1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1881781/1e518fd1119d.png)
Change Detection Angular 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1892442/tree.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1878953/687474703a2f2f63646e322e68756273706f742e6e65742f68756266732f3532303730312f426c6f672f73686d636b2f706572664d6574686f642e6769663f743d31343434373831313338333030.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1894875/Screen_Shot_2015-10-31_at_7.49.46_PM.png)
time (ms) / # of items
Работает везде
Рендерится
Везде
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1877035/react-logo-1000-transparent.png)
React Native?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1879290/138338bc-7806-11e5-8057-d34c75f3cafc.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1879854/Screen_Shot_2015-10-27_at_5.02.18_PM.png)
Простота
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1895182/Screen_Shot_2015-11-01_at_12.38.33_AM.png)
Разделение понятий
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1895172/Screen_Shot_2015-11-01_at_12.26.15_AM.png)
Синтаксис
@Component({
selector: 'my-dashboard',
templateUrl: 'app/dashboard.component.html',
styleUrls: ['app/dashboard.component.css'],
directives: [CORE_DIRECTIVES, StatusComponent]
})
export class DashboardComponent {
heroes: Hero[];
...
constructor(private _heroService: HeroService) {
_heroService.getHeroes()
.then((resp) => this.heroes = resp);
}
...
}
@Directive({
selector: '[tooltip]',
properties: [
'text: tooltip'
],
host: { '(mouseover)': 'show()' }
})
class Form {
text:string;
show() {
console.log(this.text);
}
}
<span tooltip="Tooltip text goes here.">
Some text here.</span>
@Component({selector: 'todo-cmp'})
class TodoCmp {
@Input() model;
@Output() complete = new EventEmitter();
// TypeScript supports initializing fields
onCompletedButton() {
this.complete.next(); // this fires an event
}
}
...
<todo-cmp [model]="todo"
(complete)="onCompletingTodo(todo)"></todo-cmp>
Input Output
Input Output
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1892734/tumblr_nnzn556v7F1qc0howo3_1280.png)
Hello {{user}}!
<div *ng-if="isAdministrator">
...administrator menu here...
</div>
Inline Templates
Hello {{user}}!
<template [ng-if]="isAdministrator">
<div>
...administrator menu here...
</div>
</template>
<video-player #player></video-player>
<button (click)="player.pause()">Pause</button>
Local Variable
(Веб)Компоненты
“I definitely think it's the wrong programming paradigm; I really hope that [web components] do not succeed.”
— Pete Hunt
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1877035/react-logo-1000-transparent.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1894831/Screen_Shot_2015-10-31_at_7.12.47_PM.png)
import {Component, Input, ngClass, ViewEncapsulation}
...
@Component({
encapsulation: ViewEncapsulation.Emulated
// ViewEncapsulation.Native
// ViewEncapsulation.None
})
.started[_ngcontent-swe-4] {
color: green;
}
Легкая
Миграция
angular.module('app')
.service('serviceA', function() {})
@Component({
selector: 'component-a'
})
@Inject("serviceA")
export class ComponentA {
constructor(serviceA) { }
}
ng1module.directive('user', function() {
return {
scope: {handle: '@', reset: '&'},
template: `
User: {{handle}}
<hr>
<button ng-click="reset()">clear</button>`
};
});
@Component({
selector: 'upgrade-app',
template: `<div>
<h1>Title: {{user}}</h1>
<user [handle]="user"></user>
</div>`,
directives: [adapter.upgradeNg1Component('user')]
})
class UpgradeApp {
@Input() user: string;
@Output() reset = new EventEmitter();
constructor() {}
}
ng1module.directive('upgradeApp',
adapter.downgradeNg2Component(UpgradeApp));
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1881860/Screen_Shot_2015-10-28_at_1.26.31_AM.png)
Проблемы
Все еще альфа
Не готова документация
И все же...
React
App = React.createClass({
render() {
return this.numbers.map((number, index) => {
return (<li key={index}>{{number}}</li>);
});
}
});
<li *ng-for="#number of numbers">{{number}}</li>
Angular 2
Полезные видео
Полезные статьи
Обращайтесь
![](https://s3.amazonaws.com/media-p.slid.es/uploads/395409/images/1879224/0V0A4535__1_.jpg)
deck
By vladferix
deck
- 2,335