Angular. Tutorial Tour of Heroes

Introducció i instal·lació del framework Angular

• https://angular.io/
• https://angular.io/guide/quickstart

Step 1. Set up the Development Environment

$ npm install -g @angular/cli

Step 2. Create a new project

$ ng new my-app

Step 3: Serve the application

$ cd my-app
$ ng serve --open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the --open (or just -o) option will automatically open your browser on http://localhost:4200/.

Step 4: Edit your first Angular component

Editar src/app/app.component.ts:

export class AppComponent {
  title = 'My First Angular App!';
}

Project file review. src/ folder

Your app lives in the src folder. All Angular components, templates, styles, images, and anything else your app needs go here. Any files outside of this folder are meant to support building your app.

src
...app
......app.component.css
......app.component.html
......app.component.spec.ts
......app.component.ts
......app.module.ts
...assets
......gitkeep
...environments
......environment.prod.ts
......environment.ts
...browserslist
...favicon.ico
...index.html
...karma.conf.js
...main.ts
...polyfills.ts
...styles.css
...test.ts
...tsconfig.app.json
...tsconfig.spec.json
...tslint.json

Veure la funció de cadascun dels fitxers a:

• https://angular.io/guide/quickstart

Tutorial: Tour of Heroes

• https://angular.io/tutorial

L'objectiu d'aquest tutorial és seguir pas a pas tots els exemples i assimilar els conceptes: components, serveis, ...

Feina per l'alumne

La tasca principal és que funcioni el tutorial fins al final entenent tots els conceptes.

Un cop funciona, es proposa fer els següents canvis:

• A part del nom de l'heroi, afegir el camp del cognom, i que tota l'aplicació sigui consistent amb el nom i el cognom: que es pugui editar i guardar tant el nom i el cognom, que surtin concatenats el nom i el cognom, etc.

---

creat per Joan Quintana Compte, abril 2019