Angular 2 - Hello World

Esistono vari modi per iniziare con la tua prima applicazione Angular JS.

  • Un modo è fare tutto da zero, che è il modo più difficile e non preferito. A causa delle molte dipendenze, diventa difficile ottenere questa configurazione.

  • Un altro modo è utilizzare l'avvio rapido su Angular Github. Contiene il codice necessario per iniziare. Questo è normalmente ciò che viene scelto da tutti gli sviluppatori ed è ciò che mostreremo per l'applicazione Hello World.

  • Il modo finale è utilizzare Angular CLI. Ne discuteremo in dettaglio in un capitolo separato.

Di seguito sono riportati i passaggi per ottenere un'applicazione di esempio attiva e funzionante tramite GitHub.

Step 1 - Vai all'URL di GitHub - https://github.com/angular/quickstart

Step 2- Vai al prompt dei comandi, crea una directory del progetto. Può essere una directory vuota. Nel nostro esempio, abbiamo creato una directory chiamata Project.

Step 3- Successivamente, nel prompt dei comandi, vai in questa directory ed esegui il seguente comando per clonare il repository github sul tuo sistema locale. Puoi farlo emettendo il seguente comando:

git clone https://github.com/angular/quickstart Demo

Questo creerà un'applicazione JS angolare di esempio sulla tua macchina locale.

Step 4 - Apri il codice nel codice di Visual Studio.

Step 5 - Vai al prompt dei comandi e di nuovo nella cartella del tuo progetto ed esegui il seguente comando -

npm install

Questo installerà tutti i pacchetti necessari che sono richiesti per il funzionamento dell'applicazione Angular JS.

Una volta fatto, dovresti vedere una struttura ad albero con tutte le dipendenze installate.

Step 6- Vai alla cartella Demo → src → app → app.component.ts. Trova le seguenti righe di codice:

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

E sostituisci la parola chiave Angular con World come mostrato di seguito:

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

Ci sono altri file che vengono creati come parte della creazione del progetto per l'applicazione Angular 2. Al momento, non è necessario preoccuparsi degli altri file di codice perché sono tutti inclusi come parte dell'applicazione Angular 2 e non è necessario modificarli per l'applicazione Hello World.

Discuteremo questi file in dettaglio nei capitoli successivi.

Note - Visual Studio Code compilerà automaticamente tutti i file e creerà file JavaScript per tutti i file dattiloscritti.

Step 7- Ora vai al tuo prompt dei comandi ed esegui il comando npm start. Ciò farà sì che il gestore di pacchetti Node avvii un server web leggero e avvii la tua applicazione Angular.

L'applicazione Angular JS verrà ora avviata nel browser e vedrai "Hello World" nel browser, come mostrato nello screenshot seguente.

Distribuzione

Questo argomento è incentrato sulla distribuzione dell'applicazione Hello world sopra. Poiché si tratta di un'applicazione JS angolare, può essere distribuita su qualsiasi piattaforma. Il tuo sviluppo può essere su qualsiasi piattaforma.

In questo caso, sarà su Windows utilizzando il codice di Visual Studio. Ora esaminiamo due opzioni di distribuzione.

Distribuzione su server NGNIX su Windows

Tieni presente che puoi utilizzare qualsiasi server Web su qualsiasi piattaforma per ospitare applicazioni JS Angular. In questo caso, prenderemo l'esempio di NGNIX che è un popolare server web.

Step 1 - Scarica il server web NGNIX dal seguente URL http://nginx.org/en/download.html

Step 2- Dopo aver estratto il file zip scaricato, esegui il componente exe nginx che farà funzionare il server web in background. Sarai quindi in grado di andare alla home page nell'URL -http://localhost

Step 3 - Vai alla cartella del progetto Angular JS in Windows Explorer.

Step 4 - Copia la cartella Project → Demo → node-modules.

Step 5 - Copia tutti i contenuti dalla cartella Progetto → Demo → src.

Step 6 - Copia tutto il contenuto nella cartella nginx / html.

Ora vai all'URL - http://localhost, vedrai effettivamente l'applicazione Hello World come mostrato nello screenshot seguente.

Configurazione su Ubuntu

Ora vediamo come ospitare la stessa applicazione hello world su un server Ubuntu.

Step 1 - Emetti i seguenti comandi sul tuo server Ubuntu per installare nginx.

apt-get update

Il comando precedente garantirà che tutti i pacchetti sul sistema siano aggiornati.

Una volta fatto, il sistema dovrebbe essere aggiornato.

Step 2 - Ora, installa GIT sul server Ubuntu emettendo il seguente comando.

sudo apt-get install git

Una volta fatto, GIT verrà installato sul sistema.

Step 3 - Per controllare il file git version, emettere il seguente comando.

sudo git –version

Step 4 - Installa npmche è il gestore di pacchetti del nodo su Ubuntu. A tale scopo, emettere il seguente comando.

sudo apt-get install npm

Una volta fatto, npm verrà installato nel sistema.

Step 5 - Per controllare il file npm version, emettere il seguente comando.

sudo npm -version

Step 6 - Quindi, installa nodejs. Questo può essere fatto tramite il seguente comando.

sudo npm install nodejs

Step 7 - Per vedere la versione di Node.js, immetti il ​​seguente comando.

sudo nodejs –version

Step 8 - Crea una cartella del progetto e scarica il progetto iniziale di github utilizzando il seguente comando git.

git clone https://github.com/angular/quickstart Demo

Questo scaricherà tutti i file sul sistema locale.

Puoi navigare nella cartella per vedere i file sono stati scaricati con successo da GitHub.

Step 9 - Quindi emettere il seguente comando per npm.

npm install

Questo installerà tutti i pacchetti necessari che sono richiesti per il funzionamento dell'applicazione Angular JS.

Una volta terminato, vedrai tutte le dipendenze installate sul sistema.

Step 10- Vai alla cartella Demo → src → app → app.component.ts. Utilizzare l'editor vim se necessario. Trova le seguenti righe di codice:

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'Angular'; }

E sostituire la parola chiave Angular con World come mostrato nel codice seguente.

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'World'; }

Ci sono altri file che vengono creati come parte della creazione del progetto per l'applicazione Angular 2. Al momento, non è necessario preoccuparsi degli altri file di codice perché sono inclusi come parte dell'applicazione Angular 2 e non è necessario modificarli per l'applicazione Hello World.

Discuteremo questi file in dettaglio nei capitoli successivi.

Step 11- Successivamente, installa il server Lite che può essere utilizzato per eseguire l'applicazione Angular 2. Puoi farlo emettendo il seguente comando:

sudo npm install –save-dev lite-server

Una volta terminato, vedrai lo stato di completamento. Non devi preoccuparti degli avvisi.

Step 12- Creare un collegamento simbolico alla cartella del nodo tramite il seguente comando. Ciò aiuta a garantire che il gestore di pacchetti del nodo possa individuare l'installazione di nodejs.

sudo ln -s /usr/bin/nodejs /usr/bin/node

Step 13- Ora è il momento di avviare l'applicazione Angular 2 tramite il comando npm start. Questo creerà prima i file e quindi avvierà l'app Angular nel server Lite che è stato installato nel passaggio precedente.

Emetti il ​​seguente comando:

sudo npm start

Una volta terminato, ti verrà presentato l'URL.

Se vai all'URL, ora vedrai l'app Angular 2 caricare il browser.

Distribuzione di nginx su Ubuntu

Note- Puoi utilizzare qualsiasi server web su qualsiasi piattaforma per ospitare applicazioni JS Angular. In questo caso, prenderemo l'esempio di NGNIX che è un popolare server web.

Step 1 - Emetti il ​​seguente comando sul tuo server Ubuntu per installare nginx come server web.

sudo apt-get update

Questo comando garantirà che tutti i pacchetti sul sistema siano aggiornati.

Una volta fatto, il sistema dovrebbe essere aggiornato.

Step 2 - Ora emetti il ​​seguente comando per l'installazione nginx.

apt-get install nginx

Una volta terminato, nginx verrà eseguito in background.

Step 3 - Eseguire il comando seguente per confermare che il file nginx i servizi sono in esecuzione.

ps –ef | grep nginx

Ora, per impostazione predefinita, i file per nginx sono archiviati nella cartella / var / www / html. Quindi, dai le autorizzazioni necessarie per copiare i tuoi file Hello World in questa posizione.

Step 4 - Emetti il ​​seguente comando.

sudo chmod 777 /var/www/html

Step 5 - Copiare i file utilizzando qualsiasi metodo per copiare i file di progetto nella cartella / var / www / html.

Ora, se navighi all'URL - http://192.168.1.200/index.html troverai l'applicazione Hello world Angular JS.