eagle

Project Eagle

	This is a Eagle (Adler)

Angular 2 Tour of heros

This tutorial shows:

• how to use shared/util classes
• how to display data
• how to use the directives ngIf and ngFor

This tutorial uses Netbeans, Gulp.js, Node.js, Express Web-Server.

Open TUTORIAL.md to work through step by step.

Follow the links to find some more information for ...
Netbeans IDE, Gulp.js, Node.js, Express Web-Server, Angular 2 and TypeScript.

System Preparation

See Angular2 / Dingo / System preparation

---

Project description

Filenames in brackets are generated by the 'Build' process (via Gulp.js).

project   ---- nbproject ---- customs.json
         |               ---- ...
         |                
          ---- public ---- (ng2) ---- (app) ---- (app.component.js)
         |           |          |                (app.component.js.map)
         |           |          |                (app.module.js)
         |           |          |                (app.module.js.map)
         |           |          |                (main.js)
         |           |          |                (main.js.map)
         |           |          |
         |           |           ---- (shared) ---- (hero.js)
         |           |                              (hero.js.map)
         |           |
         |            -- index.html
         |               styles.css
         |               systemjs.config.js
         |
          -- src ---- ng2 ---- app ------ app.component.ts
         |         |     |                app.module.ts
         |         |     |                main.ts
         |         |     |
         |         |      ---- shared --- hero.ts
         |         |
         |          -- server.js
         |             tsconfig.json
         |             Symbolic link to ../README.md
         |             Symbolic link to ../TUTORIAL.md
         |
          -- package.json
             gulpfile.js
             README.md
             TUTORIAL.md
             .gitignore

The following files are used:

• package.json Node.js configuration (see description)
• gulpfile.js Gulp configuration (see description)
• tsconfig.json: Configuration for TypeScript transpiler tsc
• index.html: Main web page loaded by web-client
• styles.css: Stylesheet used by index.html
• server.js: The Web-Server Node.js application, based on Node.js Express.

... and for Angular 2:

• app.components.ts: Angular 2 component AppComponent
  Angular applications are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen. This component is used to replace the content of the angular2-app selector element in index.html
  See also https://angular.io/docs/ts/latest/quickstart.html
• app.module.ts: Angular 2 module
  Angular Modules help organize an application into cohesive blocks of functionality.
  See also https://angular.io/docs/ts/latest/guide/ngmodule.html
• main.ts: Start of Angular 2 application
  This file is used to bootstrap the Angular 2 application.
  See also https://angular.io/docs/ts/latest/guide/ngmodule.html#!#bootstrap
• systemjs.config.js: systemjs configuration (dynamic module loader)
• hero.ts: Shared class Hero

---

Dependencies

See Angular2 / Dingo / Dependencies

---

Variant A: Build and run project from GIT-Repository

To do (on Linux OS) ...

1. open shell and clone git repository
   git clone <repository-url>
2. change working directory to project and install node modules
   cd <project-dir>/eagle
npm install
3. transpile the typescript files and start the server
   npm start
4. start a web-client and test the server
   http://localhost:8080

---

Variant B: Create project from scratch

See [Angular2 / Dingo / Variant B] (https://github.com/ManfredSteiner/angular2/tree/master/dingo#variant-b-create-project-from-scratch) and use sources of this project.