Давным-давно, когда еще не было GoPro, а prompt считался стандартом обратной связи с пользователем (на самом деле - нет), появилась первая версия Angular. Много времени прошло с тех пор, появилась палка для селфи , а разработчики выпустили публичную alpha-версиию Angular 2. Теперь мы можем рассмотреть работу фреймворка основываясь на реальном коде, а не на слухах.
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>
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"]
});
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);
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?
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)
});
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