JS Framework Days 2015

1. Angular 2: Всех переиграл
Евгений Жарков
DOOR3
eu.zharkov@gmail.com
@2j2e

2. Текущий статус
Alpha

3. Общий вид
@Template({
url: 'foo.html'
})
@Component({
selector: 'foo',
})
class Foo {
bar: string;
constructor() {
this.bar = 'baz';
this.bar = 2; // compiler throws an error
}
}

4. ToDo пример
@Template({
url: 'todos.html'
})
@Component({
selector: 'todo-app',
})
class TodoApp {
constructor() {
this.todos = ['Item1', 'Item2'];
}
}

5. Компоненты
@Template({
url: 'todos.html'
})
@Component({
selector: 'todo-app',
})
<todo-­‐app></todo-­‐app>

6. bootstrap
@Component({
selector: 'todo-app',
})
@Template({ url: 'todos.html' })
export class TodoApp {
todos;
constructor() {
this.todos = ['Item1', 'Item2'];
}
}
import {bootstrap} from 'angular';
import {TodoApp} from 'todoapp';
bootstrap(TodoApp);

7. План построения приложения
1.Создать модуль
2.Объявить ng-app
3.Создать контроллер
4.Закинуть данные в $scope
5.Объявить контроллер
6.Создать шаблон
1.Создать компонент
2.Создать шаблон
3.Bootstrap
4.Транспиляция
Angular 1.X Angular 2

8. Шаблоны
@Template({
url: 'name-change.html'
})
@Component({
selector: 'name-change',
})
class NameChange {
constructor() {
this.name = '';
}
changeName(newName) {
this.name = newName;
}
}

9. Шаблоны
<div> My name is {{ name }} </div>
<div>
<input #newname type="text">
<button (click)="changeName(newname.value)"
[disabled]="newname.value == 'David'">
Change Name
</button>
</div>

10. Локальные переменные
<div>
<input #newname type="text">
{{ newname.value }}
</div>

11. Обработчик событий
<div>
<input #newname type="text">
<button (click)="changeName($event, newname.value)">
</div>

12. Привязка данных
<div>
<input #newname type="text">
<span [textContent]="newname.value"></span>
</div>

13. ]
Привязка данных
]
@Template({
url: 'name-change.html'
})
@Component({
selector: 'name-change',
})
class NameChange {
constructor() {
this.name = '';
}
changeName(newName) {
this.name = newName;
}
}
<div> My name is {{ name }} </div>
<div>
<input #newname type="text">
<button (click)="changeName(newname.value)"
[disabled]="newname.value == 'David'"> Change Name
</button>
</div>

14. Определение изменений

15. Формы

16. Это непросто
•Сложная логика
•Тестирование
•Переодически изменения

17. Логика
•Зависимости элементов друг от друга
•Пользователь может вводить неверные данные, в разном порядке
•Хаотичное появление ошибок

18. Тестирование
•Шаблоны должны компилироваться
•Это позволяет создавать множество e2e тестов
•Получаем быстрые и изолированные тесты

19. Изменения
•Ожидание ответа сервера
•Обработка формы при okeyup или onchange
•Изменения зависимых элементов управлений

20. Angular 2 Forms
- Отдельный модуль по типу модуля маршрутизации
- Не обязательный, но полезные, должен быть

21. Формы
- Imperative Driven
- Data Driven
- Template Driven

22. Формы
•Комплексная логика - обрабатываемая элементами управлениями и
валидаторами
•Тестирование - изолированная от DOM
•Обработка изменений - observable

23. Элементы управления
]
// create a control
var nameControl = new Control("David");
// store its value
var nameValue = nameControl.value;
// check control states
var isValid = nameControl.valid;
var hasBeenChanged = nameControl.dirty;
var hasNotBeenChanged = nameControl.pristine;
var numErrors = nameControl.errors.length;

24. Группа элементов управления
]
// create a control group
var group = new ControlGroup({
fullName: new Control("David East", Validators.required),
username: new Control("ng2rox", Validators.required),
favColor: new Control("")
});

25. Построение форм
]
// create a builder
var builder = new FormBuilder();
// build a group w/ controls
var group = builder.group({
fullName: ["David East", Validators.required],
username: ["ng2rox", Validators.required],
favColor: ["Blue"]
});

26. Валидаторы
]
import {bootstrap, Component, View} from 'angular2/angular2';
import {FormBuilder, Validators, FormDirectives, ControlGroup} from
'angular2/forms';
@Component({
selector: 'form-app'
})
@View({
url: 'form-app.html',
directives: [FormDirectives]
})
class FormApp {
myForm: ControlGroup;
constructor(builder: FormBuilder) {
this.myForm = builder.group({
fullName: ["", Validators.required],
username: ["", Validators.required],
favColor: [""]
});
}
}

27. Изолированное тестирование
]
var builder = new FormBuilder();
var app = new AppComponent(builder);
// The AppComponent is initially in an invalid state
// Assertion passes
console.assert(app.myForm.valid === false);
// Assertion fails
console.assert(app.myForm.valid === true);

28. Шаблоны
]
<div [control-group]="myForm">
<input [control]="myForm.controls.fullName">
</div>

29. Шаблоны, краткий синтаксис
]
<div [control-group]="myForm">
<!-- myForm.controls.fullName-->
<input control="fullName">
</div>

30. Вложенные группы
]
// create a builder
var builder = new FormBuilder();
// build a group w/ controls
var group = builder.group({
fullName: ["David East", Validators.required],
username: ["ng2rox", Validators.required],
// nested group
address: builder.group({
street: ["", Validators.required],
streetLine2: [""],
city: ["", Validators.required],
state: ["", Validators.required],
zip: ["", Validators.required]
});
});
var isValid = group.controls.address.valid; // is the address
valid?

31. Пример
]
<div [control-group]="myForm">
<input control="fullName">
<input control="username">
<!-- Nested Control Group -->
<div control-group="address">
<input control="street">
<input control="streetLine2">
<input control="city">
<input control="state">
<input control="zip">
</div>
</div>

32. Observables
]
var control = new Control();
var ref = new Firebase('https://
ngforms.firebaseio.com/control')
// Save updates to Firebase
control.valueChanges.subscribe(function(value) {
ref.set(value)
});

33. Angular-разработчик ждет
окончательного релиза

34. HAHAHA!
Wait, i don’t
get it.
Вопросы!
Система мотивации
За каждый вопрос - google наклейка

35. Ссылки
- Angular 2 Forms
- Forms in Angular 2
- Change Detection in Angular 2 (Victor Savkin)
- Angular2 - First Impressions (Minko Gechev)
- An Angular2 Todo App: First look at App Development in Angular2