 |
This is a Ferret (Frettchen) |
This project shows ...
- how to handle user inputs in Angular 2
- how to bind user input events to methods
- how to pass DOM event objects to methods
- how to use template reference variables
- how to use Angular 2 pseudo events
- how to add some data to a list
These techniques are useful for small-scale demonstrations,
but they quickly become verbose and clumsy when handling large
amounts of user input. Two-way data binding is a more elegant
and compact way to move values between data entry fields and model properties.
The next tutorial project, gerbil, explains how to write two-way bindings with NgModel.
This tutorial uses Netbeans, Gulp.js, Node.js, Express Web-Server.
Open Angular 2 tutorial User Input 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.
To do (on Linux OS) ...
- open shell and clone git repository
git clone <repository-url> - change working directory to project and install node modules
cd <project-dir>/ferret
npm install - transpile the typescript files and start the server
npm start - start a web-client and test the server
http://localhost:8080
See Angular2 / Dingo / System preparation
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)
| | | (click-me.component.js)
| | | (click-me.component.js.map)
| | | (click-me2.component.js)
| | | (click-me2.component.js.map)
| | | (keyup.components.js)
| | | (keyup.components.js.map)
| | | (little-tour.component.js)
| | | (little-tour.component.js.map)
| | | (loop-back.component.js)
| | | (loop-back.component.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
| | | click-me.component.js
| | | click-me2.component.js
| | | keyup.components.js
| | | little-tour.component.js
| | | loop-back.component.js
| | | loop-back.component.js.map
| | | 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
See Angular2 / Dingo / Dependencies
See [Angular2 / Dingo / Variant B] (https://github.com/ManfredSteiner/angular2/tree/master/dingo#variant-b-create-project-from-scratch)