Angular 2: Difference between revisions
add Forms > Control |
|||
Line 1: | Line 1: | ||
== Forms == | == Forms == | ||
=== @Component Annotation === | |||
<syntaxhighlight lang="typescript"> | |||
import {Component} from 'angular2/core'; | |||
import {FORM_DIRECTIVES} from 'angular2/common'; | |||
@Component({ | |||
selector: 'demo-form-sku', | |||
directives: [FORM_DIRECTIVES] // a shorthand to several directives for forms | |||
}) | |||
</syntaxhighlight> | |||
=== ControlGroup === | |||
<syntaxhighlight lang="typescript"> | |||
let personInfo = new ControlGroup({ | |||
firstName: new Control("Michael"), | |||
lastName: new Control("Han"), | |||
zip: new Control("90210") | |||
}) | |||
// personInfo.value; .errors .dirty .valid | |||
</syntaxhighlight> | |||
=== Control === | === Control === |
Revision as of 11:50, 13 April 2016
Forms
@Component Annotation
import {Component} from 'angular2/core';
import {FORM_DIRECTIVES} from 'angular2/common';
@Component({
selector: 'demo-form-sku',
directives: [FORM_DIRECTIVES] // a shorthand to several directives for forms
})
ControlGroup
let personInfo = new ControlGroup({
firstName: new Control("Michael"),
lastName: new Control("Han"),
zip: new Control("90210")
})
// personInfo.value; .errors .dirty .valid
Control
let nameControl = new Control("Test");
let name = nameControl.value;
nameControl.errors; nameControl.dirty; nameControl.valid;
<input type="text" ngControl="name"/>
Built-in Components
ngIf
<div *ngIf="false"></div>
<div *ngIf="a > b"></div>
<div *ngIf="str == 'yes'"></div>
<div *ngIf="myFunc()"></div>
ngSwitch
<div class="container" [ngSwitch]="myVar">
<div *ngSwitchWhen="'A'">Var is A</div>
<div *ngSwitchWhen="'B'">Var is B</div>
<div *ngSwitchDefault>Var is something else</div>
</div>
ngStyle
<div [style.background-color]="'yellow'">Testing</div>
<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">testing</div>
<span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">red text</span>
ngClass
.bordered {
border: 1px dashed black;
background-color: #eee;
}
<div [ngClass]="{borderd: false}">This is never bordered</div>
<div [ngClass]="{borderd: true}">This is always bordered</div>
<div [ngClass]="{borderd: isBordered}">Using object literal. Border {{ isBordered ? "ON":"OFF" }}</div>
toggleBorder() {
this.isBordered = !this.isBordered;
this.classesObj = {
bordered: this.isBordered
};
}
<div [ngClass]="classesObj">Using object var. Border {{classesObj.bordered ? "ON":"OFF"}}</div>
<div class="base" [ngClass]="['blue','round']">This will always have a blue and round classes</div>
this.classList = ['blue','round'];
<div class="base" [ngClass]="classList"
ngFor
this.cities = ['Miami','Sao Paulo','New York'];
<div class="ui list" *ngFor="#c of cities">
<div class="item">{{c}}</div>
</div>
adding index
<div class="ui list" *ngFor="#c of cities; #num = index">
<div class="item">{{num+1}} - {{c}}</div>
</div>
ngNonBindable
<div>
<span class="bordered">{{content}}</span>
<span class="pre" ngNonBindable>
← This is what {{content}} rendered
</span>
</div>
Miscellaneous
Four basic libraries to include
- es6-shim (for older browsers -- standardizes behaviors across browsers)
- angular2-polyfills (for standardizations, especially with zones, promises, and reflection)
- SystemJS (module loader)
- RxJS (enables reactive programming -- tools for Observables)
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<!-- main AngularJS 2 library -->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
TypeScript app.ts. import {bootstrap}, and {bootstrap} is called destructuring.
/// <reference path="node_modules/anguar2/ts/typings/node/node.d.ts"/>
/// <reference path="node_modules/anguar2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";
@Component({
selector: 'hello-world',
template: `
<div>
Hello world
</div>
`
})
class HelloWorld {
}
bootstrap(HelloWorld);
Adding a variable. Adding a property is new to ES5: "name: string;". Double brackets {{ are called "template-tags" (or "mustache tags"). Inside template-tags is expression.
/// <reference path="node_modules/anguar2/ts/typings/node/node.d.ts"/>
/// <reference path="node_modules/anguar2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";
@Component({
selector: 'hello-world',
template: `<div>Hello, {{name}}</div>`
})
class HelloWorld {
name: string;
constructor() {
this.name = 'Felipe';
}
}
bootstrap(HelloWorld);
Array. *ngFor
/// <reference path="node_modules/anguar2/ts/typings/node/node.d.ts"/>
/// <reference path="node_modules/anguar2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";
@Component({
selector: 'hello-world',
template: `
<ul>
<li *ngFor="#name of names">Hello {{name}}</li>
</ul>
`
})
class HelloWorld {
names: string[];
constructor() {
this.names = ['Ari', 'Carlos', 'Felipe', 'Nate'];
}
}
bootstrap(HelloWorld);
adding interaction.
/// <reference path="node_modules/anguar2/ts/typings/node/node.d.ts"/>
/// <reference path="node_modules/anguar2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";
@Component({
selector: 'trainer',
template: `
<form class="ui large form segment">
<h3 class="ui header">Add a Resource</h3>
<div class="field">
<label for="title">Title:</label>
<input type="text" name="title" #newtitle>
</div>
<div class="field">
<label for="link">Link:</label>
<input type="url" name="link" #newlink>
</div>
<div class="field">
<label for="credit">Credit:</label>
<input type="number" name="credit" #newcredit>
</div>
<button (click)="addArticle(newtitle,newlink)" class="ui positive right floated button">Submit resource</button>
</form>
`
})
class TrainerApp {
constructor() {
}
addResource(title: HTMLInputElement, link: HTMLInputElement): void {
console.log(`Adding article title: ${title.value} and link: ${link.value}`);
}
}
bootstrap(TrainerApp);
<input name="title" #newtitle>
Tells Angular to bind this <input> to the variable newtitle. #newtitle syntax is called a resolve.
Storing multiple items.
/// <reference path="node_modules/angular2/ts/typings/node/node.d.ts"/>
/// <reference path="node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";
class Resource {
category: string;
title: string;
link: string;
credit: number;
votes: number;
constructor(title: string, category: string, link: string, credit: number, votes?: number) {
this.category = category;
this.title = title;
this.link = link;
this.credit = credit;
this.votes = votes || 0;
}
voteUp(): void {
this.votes += 1;
}
voteDown(): void {
this.votes -= 1;
}
}
@Component({
selector: 'trainer-item',
inputs: ['resource'],
host: {
class: 'row'
},
template: `
<div class="four wide column center aligned votes">
<div class="ui statistic">
<div class="value">{{resource.votes}}</div>
<div class="label"> Points</div>
</div>
</div>
<div class="twelve wide column">
<a class="ui large header" href="{{resource.link}}">{{resource.title}}</a>
<ul class="ui big horizontal list voters">
<li class="item">
<a href (click)="voteUp()"><i class="arrow up icon"></i> upvote</a>
</li>
<li class="item">
<a href (click)="voteDown()"><i class="arrow down icon"></i> downvote</a>
</li>
</ul>
</div>
`
})
class ResourceComponent {
resource: Resource;
voteUp(): boolean {
this.resource.voteUp();
return false;
}
voteDown(): boolean {
this.resource.voteDown();
return false;
}
}
@Component({
selector: 'trainer',
directives: [ResourceComponent],
template: `
<form class="ui large form segment">
<h3 class="ui header">Add a Resource</h3>
<div class="field">
<label for="title">Title:</label>
<input type="text" name="title" #newtitle>
</div>
<div class="field">
<label for="category">Category:</label>
<input type="text" name="category" #newcategory>
</div>
<div class="field">
<label for="link">Link:</label>
<input type="url" name="link" #newlink>
</div>
<div class="field">
<label for="credit">Credit:</label>
<input type="number" name="credit" #newcredit>
</div>
<button (click)="addResource(newtitle,newcategory,newlink,newcredit)" class="ui positive right floated button">Submit resource</button>
</form>
<div class="ui grid posts">
<trainer-item *ngFor="#resource of resources" [resource]="resource"></trainer-item>
</div>
`
})
class TrainerApp {
resources: Resource[];
constructor() {
this.resources = [
new Resource('Chapter 1','Angular 2','http://angular.io',3,10),
new Resource('Chapter 2','Angular 2','http://angular.io',3,10),
new Resource('Chapter 3','Angular 2','http://angular.io',3,10),
];
}
addResource(title: HTMLInputElement, category: HTMLInputElement, link: HTMLInputElement, credit: HTMLInputElement): void {
console.log(`Adding resource -- title: ${title.value}, category: ${category.value}, link: ${link.value}, credit: ${credit.value}`);
}
}
bootstrap(TrainerApp);
Add sorting functionality.
({
`
...
<div class="ui grid posts">
<trainer-item *ngFor="#res_item of sortedResources()" [resource]="res_item"></trainer-item>
</div>
`
})
class TrainerApp {
resources: Resource[];
constructor() {
this.resources = [
new Resource('Chapter 1','Angular 2','http://angular.io','3',10),
new Resource('Chapter 2','Angular 2','http://angular.io','3',10),
new Resource('Chapter 3','Angular 2','http://angular.io','3',10),
];
}
addResource(title: HTMLInputElement, category: HTMLInputElement, link: HTMLInputElement, credit: HTMLInputElement): void {
console.log(`Adding resource -- title: ${title.value}, category: ${category.value}, link: ${link.value}, credit: ${credit.value}`);
this.resources.push(new Resource(title.value,category.value,link.value,credit.value));
title.value = category.value = link.value = credit.value = '';
}
sortedResources(): Resource[] {
return this.resources.sort((a: Resource, b: Resource) => b.credit - a.credit);
}
}
Advantages of TypeScript over ES5:
- types
- classes
- annotations
- imports
- language utilities (e.g. destructuring)
@Component is called a decorator, which adds metadata to the class that follows it.
Using the Template:... syntax is called template binding.
directives specifies other components we want to be able to use in this view. The option takes an array of classes.
[squareBrackets] pass inputs and (parenthesis) handle outputs.