Angular 6 - Configurazione del progetto

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

Angular6 utilizza la versione TypeScript 2.9 mentre Angular 4 utilizza TypeScript versione 2.2. Questo porta molta differenza nelle prestazioni.

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

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 v8.11.3 è consigliata agli utenti. Gli utenti che hanno già nodejs maggiore di 8.11 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 -

node -v
v8.11.3

Il prompt dei comandi mostra v8.11.3. 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.

npm -v
v5.6.0

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

npm install -g @angular/cli //command to install angular 6
ng new Angular 6-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.

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

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
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.3
@angular-devkit/core         0.7.3
@angular-devkit/schematics   0.7.3
@schematics/angular          0.7.3
@schematics/update           0.7.3
rxjs                         6.2.2
typescript                   2.9.2

Otteniamo la versione @ angular / cli, che è attualmente 6.1.3. La versione del nodo in esecuzione è 8.11.3 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.

Abbiamo ora installato Angular 6. Creiamo ora il nostro primo progetto in Angular 6. Per creare un progetto in Angular 6, useremo il seguente comando:

ng new projectname

Daremo un nome al progetto ng new Angular6App.

Eseguiamo ora il comando precedente nella riga di comando.

ng new Angular6App
CREATE Angular6App/angular.json (3593 bytes)
CREATE Angular6App/package.json (1317 bytes)
CREATE Angular6App/README.md (1028 bytes)
CREATE Angular6App/tsconfig.json (408 bytes)
CREATE Angular6App/tslint.json (2805 bytes)
CREATE Angular6App/.editorconfig (245 bytes)
CREATE Angular6App/.gitignore (503 bytes)
CREATE Angular6App/src/favicon.ico (5430 bytes)
CREATE Angular6App/src/index.html (298 bytes)
CREATE Angular6App/src/main.ts (370 bytes)
CREATE Angular6App/src/polyfills.ts (3194 bytes)
CREATE Angular6App/src/test.ts (642 bytes)
CREATE Angular6App/src/styles.css (80 bytes)
CREATE Angular6App/src/browserslist (375 bytes)
CREATE Angular6App/src/karma.conf.js (964 bytes)
CREATE Angular6App/src/tsconfig.app.json (170 bytes)
CREATE Angular6App/src/tsconfig.spec.json (256 bytes)
CREATE Angular6App/src/tslint.json (314 bytes)
CREATE Angular6App/src/assets/.gitkeep (0 bytes)
CREATE Angular6App/src/environments/environment.prod.ts (51 bytes)
CREATE Angular6App/src/environments/environment.ts (642 bytes)
CREATE Angular6App/src/app/app.module.ts (314 bytes)
CREATE Angular6App/src/app/app.component.html (1141 bytes)
CREATE Angular6App/src/app/app.component.spec.ts (1010 bytes)
CREATE Angular6App/src/app/app.component.ts (215 bytes)
CREATE Angular6App/src/app/app.component.css (0 bytes)
CREATE Angular6App/e2e/protractor.conf.js (752 bytes)
CREATE Angular6App/e2e/tsconfig.e2e.json (213 bytes)
CREATE Angular6App/e2e/src/app.e2e-spec.ts (307 bytes)
CREATE Angular6App/e2e/src/app.po.ts (208 bytes)

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

Useremo Visual Studio Code IDE per lavorare con Angular 6; 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.

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.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
...
Date: 2018-08-18T11:17:54.745Z
Hash: 0ace6c8a055c58d1734c
Time: 20490ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.27 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

Il server web si avvia sulla porta 4200. Digitare l'URL http://localhost:4200/nel browser e vedere l'output. Verrai indirizzato alla seguente schermata:

Apportiamo ora alcune modifiche per visualizzare il seguente contenuto:

"Welcome to Angular 6 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 utilizza 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 6 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 6 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": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"

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
         ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3Ry
         YXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9
         uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i
         TGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4b
         Wxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB
         4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hY
         mxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmV
         zZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojR
         EQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZ
         GRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBva
         W50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjM
         gMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMi
         AJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1L
         DUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwy
         MzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGN
         sYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLj
         ctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuM
         UwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4b
         DE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+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.

↰ Previous page Next page ↱