|
|
| (37 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''.
| |
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.