|
|
(41 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").
| | <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> | | |
| | <source lang="ts"> |
| | <button (click)="onSave()">Save</button> |
| | </source> |
| | |
| | Canonical form: |
| | |
| | <source lang="ts"> |
| | <button on-click="onSave()">Save</button> |
| | </source> |
| | |
| | [https://developer.mozilla.org/en-US/docs/Web/Events List of events that can be used on MDN.] |