Angular Tutorial
Iniziare con Angular
Ricerca…
Osservazioni
Angolare (comunemente indicato come " Angular 2+ " o " Angular 2 ") è un framework web front-end open source basato su TypeScript guidato dal team angolare di Google e da una comunità di individui e aziende per affrontare tutte le parti del flusso di lavoro dello sviluppatore durante la creazione di complesse applicazioni Web. Angolare è una completa riscrittura dalla stessa squadra che ha costruito AngularJS . ¹
Il framework è composto da diverse librerie , alcune delle quali core ( @ angular / core per esempio) e alcune facoltative ( @ angular / animations ).
Si scrivono applicazioni angolari componendo modelli HTML con markup Angularized, scrivendo classi di componenti per gestire tali modelli, aggiungendo la logica dell'applicazione nei servizi e componenti e servizi di boxing nei moduli .
Quindi avvia l'app eseguendo il bootstrap del modulo root . Angular subentra, presenta il contenuto dell'applicazione in un browser e risponde alle interazioni dell'utente in base alle istruzioni fornite.
Probabilmente, la parte più fondamentale dello sviluppo di applicazioni angolari sono i componenti . Un componente è la combinazione di un modello HTML e una classe componente che controlla una parte dello schermo. Ecco un esempio di un componente che mostra una stringa semplice:
src / app / app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
Ogni componente inizia con una funzione decoratore @Component che accetta un oggetto metadati . L'oggetto metadati descrive in che modo il modello HTML e la classe del componente funzionano insieme.
La proprietà selector indica a Angular di visualizzare il componente all'interno di un <my-app> nel file index.html .
index.html (all'interno del tag
body)<my-app>Loading AppComponent content here ...</my-app>
La proprietà template definisce un messaggio all'interno di un'intestazione <h1> . Il messaggio inizia con "Ciao" e termina con {{name}} , che è un'espressione vincolante di interpolazione angolare. In fase di runtime, Angular sostituisce {{name}} con il valore della proprietà del name del componente. Il binding dell'interpolazione è una delle molte funzionalità angolari che troverai in questa documentazione. Nell'esempio, modificare la proprietà del name della classe del componente da 'Angular' a 'World' e vedere cosa succede.
Questo esempio è scritto in TypeScript , un superset di JavaScript. Angular utilizza TypeScript perché i suoi tipi semplificano il supporto della produttività degli sviluppatori con gli strumenti. Inoltre, quasi tutto il supporto è per TypeScript e quindi utilizzare JavaScript semplice per scrivere la tua applicazione sarà difficile . È tuttavia possibile scrivere codice angolare in JavaScript; questa guida spiega come.
Maggiori informazioni sull'architettura di Angular possono essere trovate qui
Versioni
| Versione | Data di rilascio |
|---|---|
| 5.0.0-beta.1 (Più recente) | 2017/07/27 |
| 4.3.2 | 2017/07/26 |
| 5.0.0-beta.0 | 2017/07/19 |
| 4.3.1 | 2017/07/19 |
| 4.3.0 | 2017/07/14 |
| 4.2.6 | 2017/07/08 |
| 4.2.5 | 2017/06/09 |
| 4.2.4 | 2017/06/21 |
| 4.2.3 | 2017/06/16 |
| 4.2.2 | 2017/06/12 |
| 4.2.1 | 2017/06/09 |
| 4.2.0 | 2017/06/08 |
| 4.2.0-rc.2 | 2017/06/01 |
| 4.2.0-rc.1 | 2017/05/26 |
| 4.2.0-rc.0 | 2017/05/19 |
| 4.1.3 | 2017/05/17 |
| 4.1.2 | 2017/05/10 |
| 4.1.1 | 2017/05/04 |
| 4.1.0 | 2017/04/26 |
| 4.1.0-rc.0 | 2017/04/21 |
| 4.0.3 | 2017/04/21 |
| 4.0.2 | 2017/04/11 |
| 4.0.1 | 2017/03/29 |
| 4.0.0 | 2017/03/23 |
| 4.0.0-rc.6 | 2017/03/23 |
| 4.0.0-rc.5 | 2017/03/17 |
| 4.0.0-rc.4 | 2017/03/17 |
| 2.4.10 | 2017/03/17 |
| 4.0.0-rc.3 | 2017/03/10 |
| 2.4.9 | 2017/03/02 |
| 4.0.0-rc.2 | 2017/03/02 |
| 4.0.0-rc.1 | 2017/02/24 |
| 2.4.8 | 2017/02/18 |
| 2.4.7 | 2017/02/09 |
| 2.4.6 | 2017/02/03 |
| 2.4.5 | 2017/01/25 |
| 2.4.4 | 2017/01/19 |
| 2.4.3 | 2017/01/11 |
| 2.4.2 | 2017/01/06 |
| 2.4.1 | 2016/12/21 |
| 2.4.0 | 2016/12/20 |
| 2.3.1 | 2016/12/15 |
| 2.3.0 | 2016/12/07 |
| 2.3.0-rc.0 | 2016/11/30 |
| 2.2.4 | 2016/11/30 |
| 2.2.3 | 2016/11/23 |
| 2.2.2 | 2016/11/22 |
| 2.2.1 | 2016/11/17 |
| 2.2.0 | 2016/11/14 |
| 2.2.0-rc.0 | 2016/11/02 |
| 2.1.2 | 2016/10/27 |
| 2.1.1 | 2016/10/20 |
| 2.1.0 | 2016/10/12 |
| 2.1.0-rc.0 | 2016/10/05 |
| 2.0.2 | 2016/10/05 |
| 2.0.1 | 2016/09/23 |
| 2.0.0 | 2016/09/14 |
| 2.0.0-rc.7 | 2016/09/13 |
| 2.0.0-rc.6 | 2016/08/31 |
| 2.0.0-rc.5 | 2016/08/09 |
| 2.0.0-rc.4 | 2016/06/30 |
| 2.0.0-rc.3 | 2016/06/21 |
| 2.0.0-rc.2 | 2016/06/15 |
| 2.0.0-rc.1 | 2016/05/03 |
| 2.0.0-rc.0 | 2016/05/02 |
Installazione di Angular usando angular-cli
Questo esempio è una configurazione rapida di Angular e come generare un progetto di esempio rapido.
Prerequisiti:
- Node.js 6.9.0 o successivo.
- npm v3 o maggiore o filato .
- Digitazioni v1 o successive.
Apri un terminale ed esegui i comandi uno a uno:
npm install -g typings o yarn global add typings
npm install -g @angular/cli o yarn global add @angular/cli
Il primo comando installa la libreria di tipizzazioni globalmente (e aggiunge i typings eseguibili a PATH). Il secondo installa @ angular / cli globalmente, aggiungendo il file eseguibile ng a PATH.
Per impostare un nuovo progetto
Navigare con il terminale in una cartella in cui si desidera impostare il nuovo progetto.
Esegui i comandi:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
Cioè, ora hai un semplice progetto di esempio realizzato con Angular. Ora puoi navigare al link visualizzato nel terminale e vedere cosa sta facendo.
Per aggiungere a un progetto esistente
Passa alla radice del tuo progetto attuale.
Esegui il comando:
ng init
Questo aggiungerà l'impalcatura necessaria al tuo progetto. I file verranno creati nella directory corrente, quindi assicurati di eseguirlo in una directory vuota.
Esecuzione del progetto a livello locale
Per vedere e interagire con la tua applicazione mentre è in esecuzione nel browser, devi avviare un server di sviluppo locale che ospita i file per il tuo progetto.
ng serve
Se il server è stato avviato correttamente, dovrebbe visualizzare un indirizzo al quale è in esecuzione il server. Di solito è questo:
http://localhost:4200
Subito dopo questo server di sviluppo locale è collegato a Hot Module Reloading, quindi qualsiasi modifica a html, typescript o css attiverà il browser per essere ricaricato automaticamente (ma può essere disabilitato se lo si desidera).
Generazione di componenti, direttive, condotte e servizi
Il comando ng generate <scaffold-type> <name> (o semplicemente ng g <scaffold-type> <name> ) consente di generare automaticamente componenti angolari:
# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false
Esistono diversi tipi di scaffold che angular-cli può generare:
| Tipo di impalcatura | uso |
|---|---|
| Modulo | ng g module my-new-module |
| Componente | ng g component my-new-component |
| Direttiva | ng g directive my-new-directive |
| Tubo | ng g pipe my-new-pipe |
| Servizio | ng g service my-new-service |
| Classe | ng g class my-new-class |
| Interfaccia | ng g interface my-new-interface |
| enum | ng g enum my-new-enum |
Puoi anche sostituire il nome del tipo con la sua prima lettera. Per esempio:
ng gm my-new-module per generare un nuovo modulo o ng gc my-new-component per creare un componente.
Costruire / Bundling
Quando hai finito di costruire la tua app Web Angular e desideri installarla su un server Web come Apache Tomcat, tutto ciò che devi fare è eseguire il comando build con o senza il flag di produzione impostato. La produzione minimizza il codice e ottimizza per un ambiente di produzione.
ng build
o
ng build --prod
Quindi cerca nella directory root dei progetti una cartella /dist , che contiene la build.
Se desideri i vantaggi di un bundle di produzione più piccolo, puoi anche utilizzare la compilazione di modelli Ahead-of-Time, che rimuove il compilatore di modelli dalla build finale:
ng build --prod --aot
Test unitario
Angular fornisce test unitari integrati e ogni elemento creato da angular-cli genera un test unitario di base, che può essere speso. I test unitari sono scritti usando il gelsomino ed eseguiti attraverso Karma. Per iniziare il test, eseguire il seguente comando:
ng test
Questo comando eseguirà tutti i test nel progetto e li eseguirà di nuovo ogni volta che un file di origine cambia, sia che si tratti di un test o di un codice dell'applicazione.
Per maggiori informazioni visita anche: pagina github angular-cli
Programma angolare "Hello World"
Prerequisiti:
Impostazione dell'ambiente di sviluppo
Prima di iniziare, dobbiamo impostare il nostro ambiente.
Installa Node.js e npm se non sono già sul tuo computer.
Verificare di eseguire almeno il nodo 6.9.xe npm 3.xx eseguendo il nodo -v e npm -v in una finestra di terminale / console. Le versioni precedenti producono errori, ma le versioni più recenti vanno bene.
Installa la CLI Angolare globalmente usando
npm install -g @angular/cli.
Passaggio 1: creazione di un nuovo progetto
Aprire una finestra terminale (o il prompt dei comandi Node.js in Windows).
Creiamo un nuovo progetto e un'applicazione scheletro usando il comando:
ng new my-app
Qui il ng è per Angular. Otteniamo una struttura di file simile a questa.
Ci sono molti file Non dobbiamo preoccuparci di tutti loro ora.
Passaggio 2: servire l'applicazione
Lanciamo la nostra applicazione usando il seguente comando:
ng serve
Potremmo usare un flag -open (o semplicemente -o ) che aprirà automaticamente il nostro browser su http://localhost:4200/
ng serve --open
Spostare il browser all'indirizzo http://localhost:4200/ . Sembra qualcosa del genere:
Passaggio 3: modifica del nostro primo componente angolare
La CLI ha creato per noi il componente angolare predefinito. Questo è il componente root ed è chiamato app-root . Lo si può trovare in ./src/app/app.component.ts .
Apri il file del componente e modifica la proprietà del titolo da Welcome to app!! a Hello World . Il browser si ricarica automaticamente con il titolo rivisto.
Codice originale: notare il title = 'app';
Codice modificato: il valore del title è cambiato.
Allo stesso modo c'è una modifica in ./src/app/app.component.html .
HTML originale
HTML modificato
Si noti che verrà visualizzato il valore del title da ./src/app/app.component.ts . Il browser si ricarica automaticamente quando vengono apportate le modifiche. Sembra qualcosa del genere.
Per saperne di più sull'argomento, visita questo link qui .