Angular 2

From Han Wiki
Revision as of 14:40, 6 April 2016 by Mhan (talk | contribs) (add directives)

Jump to navigation Jump to search

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.

Retrieved from "https://wiki.michaelhan.net/index.php?title=Angular_2&oldid=226"