Angular 2: Difference between revisions

From Han Wiki
Jump to navigation Jump to search
← Older edit
add array
add a link to Angular 2 by Examples
 
(39 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>

Latest revision as of 12:52, 8 July 2016

Angular 2 by Examples

Running the app (via npm)

Compile just once. This executable binary is founder under ./npm_modules/.bin/ folder. 

$ tsc

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: 

$ npm run tsc:w

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.

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