|
|
| (31 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| | [[Angular 2 by Examples]] |
|
| |
|
| Four basic libraries to include
| | = Running the app (via npm) = |
|
| |
|
| * es6-shim (for older browsers -- standardizes behaviors across browsers)
| | Compile just once. This executable binary is founder under <span class="shell">./npm_modules/.bin/</span> folder. |
| * angular2-polyfills (for standardizations, especially with zones, promises, and reflection)
| |
| * SystemJS (module loader)
| |
| * RxJS (enables reactive programming -- tools for Observables)
| |
|
| |
|
| <syntaxhighlight lang="html"> | | <source lang="bash"> |
| <script src="node_modules/es6-shim/es6-shim.js"></script>
| | $ tsc |
| <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
| | </source> |
| <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>
| |
| </syntaxhighlight> | |
|
| |
|
| TypeScript app.ts. import {bootstrap}, and {bootstrap} is called ''destructuring''.
| | If <code>tsc</code> is not directly available. It can also be run this way: <code>npm run tsc</code>. |
|
| |
|
| <syntaxhighlight lang="javascript">
| | If you want the server to watch for changes and compile on change (aka transpile) you can run the following command: |
| /// <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({
| | <source lang="bash"> |
| selector: 'hello-world',
| | $ npm run tsc:w |
| template: `
| | </source> |
| <div>
| |
| Hello world
| |
| </div>
| |
| `
| |
| })
| |
|
| |
|
| class HelloWorld {
| | == turn off connection logging == |
| }
| |
|
| |
|
| bootstrap(HelloWorld);
| | Setting logConnection to false in bs-config.json did not work. The connection is logged by a middleware called connect-logger and you can disable it by creating <span class="package">bs-config.js</span> with the following content. |
| </syntaxhighlight> | |
|
| |
|
| Adding a variable. Adding a ''property'' is new to ES5: "name: string;". Double brackets <nowiki>{{</nowiki> are called "template-tags" (or "mustache tags"). Inside template-tags is ''expression''.
| | <source lang="js" highlight="2"> |
| | module.exports = { |
| | server: { middleware: { 0: null }} |
| | }; |
| | </source> |
|
| |
|
| <syntaxhighlight lang="javascript">
| | == turn off file change updates == |
| /// <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({
| | Add <span class="shell">logFileChanges</span> line to disable logging of file change updates. |
| selector: 'hello-world',
| |
| template: `<div>Hello, {{name}}</div>`
| |
| })
| |
|
| |
|
| class HelloWorld {
| | <source lang="js" highlight="3"> |
| name: string;
| | module.exports = { |
| | server: { middleware: { 0: null }}, |
| | logFileChanges: false |
| | }; |
| | </source> |
|
| |
|
| constructor() {
| | = Event = |
| this.name = 'Felipe';
| |
| }
| |
| }
| |
|
| |
|
| bootstrap(HelloWorld);
| | An example event binding. |
| </syntaxhighlight>
| |
|
| |
|
| Array. *ngFor
| | <source lang="ts"> |
| | <button (click)="onSave()">Save</button> |
| | </source> |
|
| |
|
| <syntaxhighlight lang="javascript">
| | Canonical form: |
| /// <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({
| | <source lang="ts"> |
| selector: 'hello-world',
| | <button on-click="onSave()">Save</button> |
| template: `
| | </source> |
| <ul>
| |
| <li *ngFor="#name of names">Hello {{name}}</li>
| |
| </ul>
| |
| `
| |
| })
| |
|
| |
|
| class HelloWorld {
| | [https://developer.mozilla.org/en-US/docs/Web/Events List of events that can be used on MDN.] |
| names: string[];
| |
| | |
| constructor() {
| |
| this.names = ['Ari', 'Carlos', 'Felipe', 'Nate'];
| |
| }
| |
| }
| |
| | |
| bootstrap(HelloWorld);
| |
| </syntaxhighlight>
| |
| | |
| adding interaction.
| |
| | |
| <syntaxhighlight lang="javascript">
| |
| /// <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);
| |
| </syntaxhighlight>
| |
| | |
| <code><input name="title" #newtitle></code>
| |
| | |
| Tells Angular to ''bind'' this <input> to the variable '''newtitle'''. '''#newtitle''' syntax is called a ''resolve''.
| |
| | |
| ----
| |
| | |
| Storing multiple items.
| |
| | |
| <syntaxhighlight lang="javascript">
| |
| /// <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);
| |
| </syntaxhighlight>
| |
| | |
| ----
| |
| | |
| Add sorting functionality.
| |
| | |
| <syntaxhighlight lang="javascript">
| |
| ({
| |
| `
| |
| ...
| |
| <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);
| |
| }
| |
| }
| |
| </syntaxhighlight>
| |
| | |
| Advantages of TypeScript over ES5:
| |
| | |
| * types
| |
| * classes
| |
| * annotations
| |
| * imports
| |
| * language utilities (e.g. destructuring)
| |
| | |
| <syntaxhighlight lang="javascript">
| |
| </syntaxhighlight>
| |
| | |
| @Component is called a ''decorator'', which adds metadata to the class that follows it.
| |
| | |
| Using the {{ ... }} syntax is called ''template binding''.
| |
Angular 2 by Examples
Running the app (via npm)
Compile just once. This executable binary is founder under ./npm_modules/.bin/ folder.
If tsc is not directly available. It can also be run this way: npm run tsc.
If you want the server to watch for changes and compile on change (aka transpile) you can run the following command:
turn off connection logging
Setting logConnection to false in bs-config.json did not work. The connection is logged by a middleware called connect-logger and you can disable it by creating bs-config.js with the following content.
module.exports = {
server: { middleware: { 0: null }}
};
turn off file change updates
Add logFileChanges line to disable logging of file change updates.
module.exports = {
server: { middleware: { 0: null }},
logFileChanges: false
};
Event
An example event binding.
<button (click)="onSave()">Save</button>
Canonical form:
<button on-click="onSave()">Save</button>
List of events that can be used on MDN.