Angular 4 - Configurazione del progetto

AngularJS si basa sul controller della vista del modello, mentre Angular 2 si basa sulla struttura dei componenti. Angular 4 funziona sulla stessa struttura di Angular2 ma è più veloce rispetto ad Angular2.

Angular4 utilizza la versione TypeScript 2.2 mentre Angular 2 utilizza TypeScript versione 1.8. Questo porta molta differenza nelle prestazioni.

Per installare Angular 4, il team di Angular ha ideato Angular CLI che semplifica l'installazione. È necessario eseguire alcuni comandi per installare Angular 4.

Vai a questo sito https://cli.angular.io per installare Angular CLI.

Per iniziare con l'installazione, dobbiamo prima assicurarci di avere nodejs e npm installati con l'ultima versione. Il pacchetto npm viene installato insieme a nodejs.

Vai al sito di nodejs https://nodejs.org/en/.

L'ultima versione di Nodejs v6.11.0 è consigliata agli utenti. Gli utenti che hanno già nodejs maggiore di 4 possono saltare il processo precedente. Una volta installato nodejs, puoi controllare la versione di node nella riga di comando utilizzando il comando, node–v, come mostrato di seguito -

Il prompt dei comandi mostra v6.11.0. Una volta installato nodejs, anche npm verrà installato insieme ad esso.

Per verificare la versione di npm, digita comando npm –vnel terminale. Verrà visualizzata la versione di npm come mostrato di seguito.

La versione di npm è 3.10.10. Ora che abbiamo installato nodejs e npm, eseguiamo i comandi angular cli per installare Angular 4. Vedrai i seguenti comandi sulla pagina web:

npm install -g @angular/cli //command to install angular 4

ng new Angular 4-app // name of the project

cd my-dream-app

ng serve

Cominciamo con il primo comando nella riga di comando e vediamo come funziona.

Per cominciare, creeremo una directory vuota in cui eseguiremo il comando Angular CLI.

Immettere il comando precedente per installare Angular 4. Il processo di installazione verrà avviato e il completamento richiederà alcuni minuti.

Una volta completato il comando precedente per l'installazione, viene visualizzato il seguente prompt dei comandi:

Abbiamo creato una cartella vuota ProjectA4e installato il comando Angular CLI. Abbiamo anche usato-gper installare Angular CLI a livello globale. Ora puoi creare il tuo progetto Angular 4 in qualsiasi directory o cartella e non devi installare il progetto Angular CLI, poiché è installato sul tuo sistema a livello globale e puoi utilizzarlo da qualsiasi directory.

Controlliamo ora se Angular CLI è installato o meno. Per verificare l'installazione, eseguire il seguente comando nel terminale:

ng -v

Otteniamo la versione @ angular / cli, che è attualmente 1.2.0. La versione del nodo in esecuzione è 6.11.0 e anche i dettagli del sistema operativo. I dettagli di cui sopra ci dicono che abbiamo installato con successo cli angolare e ora siamo pronti per iniziare il nostro progetto.

Ora abbiamo installato Angular 4. Creiamo ora il nostro primo progetto in Angular 4. Per creare un progetto in Angular 4, useremo il seguente comando:

ng new projectname

Daremo un nome al progetto ng new Angular 4-app.

Eseguiamo ora il comando precedente nella riga di comando.

Il progetto Angular 4-appviene creato con successo. Installa tutti i pacchetti necessari per l'esecuzione del nostro progetto in Angular 4. Passiamo ora al progetto creato, che si trova nella directoryAngular 4-app. Cambia la directory nella riga di comando -cd Angular 4-app.

Useremo Visual Studio Code IDE per lavorare con Angular 4; puoi usare qualsiasi IDE, ad esempio Atom, WebStorm, ecc.

Per scaricare Visual Studio Code, vai a https://code.visualstudio.com/ e fare clic Download for Windows.

Clic Download for Windows per installare l'IDE ed eseguire il setup per iniziare a usare l'IDE.

L'editor ha il seguente aspetto:

Non abbiamo avviato alcun progetto al suo interno. Prendiamo ora il progetto che abbiamo creato utilizzando angular-cli.

Considereremo il Angular 4-appprogetto. Apriamo l'app Angular 4 e vediamo come appare la struttura delle cartelle.

Ora che abbiamo la struttura dei file per il nostro progetto, compiliamo il nostro progetto con il seguente comando:

ng serve

Il ng serve Il comando crea l'applicazione e avvia il server web.

Il server web si avvia sulla porta 4200. Digitare l'URL http://localhost:4200/nel browser e vedere l'output. Una volta compilato il progetto, riceverai il seguente output:

Una volta che corri http://localhost:4200/ nel browser verrai indirizzato alla seguente schermata:

Apportiamo ora alcune modifiche per visualizzare il seguente contenuto:

“Welcome to Angular 4 project”

Abbiamo apportato modifiche ai file: app.component.html e app.component.ts. Discuteremo di più su questo nei nostri capitoli successivi.

Cerchiamo di completare la configurazione del progetto. Se vedi che abbiamo usato la porta 4200, che è la porta predefinita che angular-cli usa durante la compilazione. È possibile modificare la porta se lo si desidera utilizzando il seguente comando:

ng serve --host 0.0.0.0 –port 4205

La cartella dell'app Angular 4 ha quanto segue folder structure -

e2e- cartella di test end to end. Principalmente e2e viene utilizzato per i test di integrazione e aiuta a garantire che l'applicazione funzioni correttamente.
node_modules- Il pacchetto npm installato è node_modules. Puoi aprire la cartella e vedere i pacchetti disponibili.
src - Questa è la cartella in cui lavoreremo al progetto utilizzando Angular 4.

La cartella dell'app Angular 4 ha quanto segue file structure -

.angular-cli.json - Fondamentalmente contiene il nome del progetto, la versione di cli, ecc.
.editorconfig - Questo è il file di configurazione per l'editor.
.gitignore - Un file .gitignore dovrebbe essere inserito nel repository, in modo da condividere le regole di ignora con tutti gli altri utenti che clonano il repository.
karma.conf.js- Viene utilizzato per il test dell'unità tramite il goniometro. Tutte le informazioni necessarie per il progetto sono fornite nel file karma.conf.js.
package.json - Il file package.json dice quali librerie verranno installate in node_modules quando si esegue npm install.

Al momento, se apri il file nell'editor, otterrai i seguenti moduli aggiunti al suo interno.

"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

Nel caso in cui sia necessario aggiungere più librerie, è possibile aggiungerle qui ed eseguire il comando npm install.

protractor.conf.js - Questa è la configurazione di test richiesta per l'applicazione.
tsconfig.json - Questo fondamentalmente contiene le opzioni del compilatore richieste durante la compilazione.
tslint.json - Questo è il file di configurazione con le regole da considerare durante la compilazione.

Il src folder è la cartella principale, che internally has a different file structure.

app

Contiene i file descritti di seguito. Questi file vengono installati da angular-cli per impostazione predefinita.

app.module.ts- Se apri il file, vedrai che il codice ha riferimenti a diverse librerie, che vengono importate. Angular-cli ha utilizzato queste librerie predefinite per l'importazione: angular / core, platform-browser. I nomi stessi spiegano l'uso delle librerie.

Vengono importati e salvati in variabili come declarations, imports, providers, e bootstrap.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

declarations- Nelle dichiarazioni viene memorizzato il riferimento ai componenti. L'Appcomponent è il componente predefinito che viene creato ogni volta che viene avviato un nuovo progetto. Impareremo a creare nuovi componenti in una sezione diversa.

imports- Questo avrà i moduli importati come mostrato sopra. Al momento, BrowserModule fa parte delle importazioni che viene importato da @ angular / platform-browser.

providers- Questo farà riferimento ai servizi creati. Il servizio verrà discusso in un capitolo successivo.

bootstrap - Fa riferimento al componente predefinito creato, ovvero AppComponent.

app.component.css- Puoi scrivere la tua struttura css qui. In questo momento, abbiamo aggiunto il colore di sfondo al div come mostrato di seguito.

.divdetails{
   background-color: #ccc;
}

app.component.html - Il codice html sarà disponibile in questo file.

<!--The content below is only a placeholder and can be replaced.-->
<div class = "divdetails">
   <div style = "text-align:center">
      <h1>
         Welcome to {{title}}!
      </h1>
      <img width = "300" src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
      ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFe
      HBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4
      xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaH
      R0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAg
      MjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2
      ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0M
      zMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdD
      AiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMj
      MwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbn
      RzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMj
      AzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMU
      w2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMj
      UsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLD
      EzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </div>
   <h2>Here are some links to help you start: </h2>
   <ul>
      <li>
         <h2>
            <a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
         </h2>
      </li>
      <li>
         <h2>
            <a target = "_blank" href = "https://github.com/angular/angular-cli/wiki">
               CLI Documentation
            </a>
         </h2>
      </li>
      <li>
         <h2>
            <a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
         </h2>
      </li>
   </ul>
</div>

Questo è il codice html predefinito attualmente disponibile con la creazione del progetto.

app.component.spec.ts - Questi sono file generati automaticamente che contengono unit test per il componente di origine.
app.component.ts- La classe per il componente è definita qui. Puoi eseguire l'elaborazione della struttura html nel file .ts. Il trattamento includerà attività come la connessione al database, l'interazione con altri componenti, il routing, i servizi, ecc.

La struttura del file è la seguente:

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
}

Risorse

Puoi salvare le tue immagini, i file js in questa cartella.

Ambiente

Questa cartella contiene i dettagli per la produzione o l'ambiente di sviluppo. La cartella contiene due file.

environment.prod.ts
environment.ts

Entrambi i file contengono dettagli che indicano se il file finale deve essere compilato nell'ambiente di produzione o nell'ambiente dev.

La struttura di file aggiuntiva della cartella dell'app Angular 4 include quanto segue:

favicon.ico

Questo è un file che di solito si trova nella directory principale di un sito web.

index.html

Questo è il file che viene visualizzato nel browser.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
      <link href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel="stylesheet">
      <meta name = "viewport" content="width=device-width, initial-scale=1">
      <link rel = "icon" type="image/x-icon" href="favicon.ico">
   </head>
   
   <body>
      <app-root></app-root>
   </body>
</html>

Il corpo ha <app-root></app-root>. Questo è il selettore utilizzato inapp.component.ts file e visualizzerà i dettagli dal file app.component.html.

main.ts

main.ts è il file da cui iniziamo lo sviluppo del nostro progetto. Inizia con l'importazione del modulo di base di cui abbiamo bisogno. In questo momento, se vedi angular / core, angular / platform-browser-dynamic, app.module e environment vengono importati per impostazione predefinita durante l'installazione angular-cli e la configurazione del progetto.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

Il platformBrowserDynamic().bootstrapModule(AppModule) ha il riferimento al modulo genitore AppModule. Quindi, quando viene eseguito nel browser, il file che viene chiamato è index.html. Index.html si riferisce internamente a main.ts che chiama il modulo genitore, ovvero AppModule quando viene eseguito il codice seguente:

platformBrowserDynamic().bootstrapModule(AppModule);

Quando viene chiamato AppModule, chiama app.module.ts che chiama ulteriormente AppComponent in base al boostrap come segue:

bootstrap: [AppComponent]

In app.component.ts è presente un file selector: app-rootche viene utilizzato nel file index.html. Questo mostrerà i contenuti presenti in app.component.html.

Nel browser verrà visualizzato quanto segue:

polyfill.ts

Viene utilizzato principalmente per la compatibilità con le versioni precedenti.

styles.css

Questo è il file di stile richiesto per il progetto.

test.ts

Qui verranno gestiti i casi di unit test per testare il progetto.

tsconfig.app.json

Viene utilizzato durante la compilazione, ha i dettagli di configurazione che devono essere utilizzati per eseguire l'applicazione.

tsconfig.spec.json

Questo aiuta a mantenere i dettagli per il test.

typings.d.ts

Viene utilizzato per gestire la definizione TypeScript.

La struttura del file finale appare come segue:

↰ Previous page Next page ↱