Hello World amb Angular2

agost 24, 2016

Angular2 és un framework (no una llibreria) de codi obert, creat i mantingut per google. Utilitza el patró MVC. Permet extendre sintaxi HTML (es poden crear noves etiquetes i atributs). A més és cada cop més utilitzat i per això existeix molta comunitat

Les aplicacions poden ser codificades en ES5, ES6, Dart, TypeScript. Angular2 està escrit amb Typescript

INSTAL·LACIÓ SOFTWARE

Framework modular, es a dir poden instal·lar les dependències que necessitem. Necessita un administrador per la instal·lació dels diferents paquets, per això instal·larem NPM, i també necessita node.js:

– npm → versió superior a la 3

– node.js → versió superior a la 5

angular

Creem un directori on guardarem el projecte d’angular

Ara instal.lem Angular2, anem a la pàgina oficial: https://angularjs.org/, a l’apartat del quickstart veiem els diferents arxius de configuració que necessitem:

angular configuracio

  • package.json –> Definició de paquets. Es configuran els detalls del paquets
  • tsconfig.json –> És el compilador de Typescript
  • typings.json –> Ésl’eina que ens permet executar els arxius del tipus  “.ts”  (definició de tipus)
  • systemjs.config.js

Ara ens centrem en el fitxer de package.json, dins de dependencies es defineixen els paquets que instal·larem, alguns son obligatoris (@angular/core, @angular/common), i d’altres son opcionals en funció del tipus de projecte. Podeu mirar els detalls de cada paquet a la dcoumentació.

Podem copiar la plantilla package.json dins de la carpeta del nostre projecte i efectuem la instal.lació, amb la comanda npm install

O fer-ho manualment, creant el nostre fitxer de configuració package.json amb npm init

Nosaltres aprofitarem les plantilles que venen per defecte, i en tot cas afegirem dependències en funció de les necessitats. Copiem els 4 fitxers dins del nostre projecte, i executem

Despres de l’instal.lació hem de comprobar el log, ens sortiran missatges WARM, dels cuals no ens hem de preocupar, però potser que surtin missatges d’ERROR, potser amb problema de versions, si es així ens fixem en quin és el que dona problemes i l’instal·lem manualment la versió que toqués, per exemple suposem que ens ha donat error amb rxjs i ens demana la versió 6, doncs executem:

Si mirem ara l’estructura de fitxers de l’aplicació veurem que s’han instal.lat les diferents dependències que estaven definides en els fitxers de configuració.

app

Ara ja tenim tot el que necessitem per crear la nostra primera aplicació amb Angular2. Creem una carpeta per la nostra aplicació:

Utilitzarem les mateixes plantilles que a la guia de instal.lació ràpida d’Angular:

  • app.component.ts

  • app.module.ts

  • main.ts

I ara a l’arrel, creem l’index.html de l’aplicació:

Finalment l’estructura del projecte queda així:

angular-project

Ja ho tenim tot, així que executem el projecte amb lite server (que esta definit a l’arxiu package.json)

angular run

I automàticament s’obre el navegador amb l’execució de l’index:

angular index.html

 

I fins aquí tenim el “Hello World” amb ANGULAR2

Feel free to share...Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin


Els comentaris estan tancats.