Angular7 - Configurazione del progetto

In questo capitolo, discuteremo della configurazione del progetto in Angular 7.

Per iniziare con la configurazione del progetto, assicurati di aver installato nodejs. You can check the version of node in the command line using the command, node –v, come mostrato di seguito -

Se non ottieni la versione, installa nodejs dal loro sito ufficiale -https://nodejs.org/en/.

Una volta installato nodejs, anche npm verrà installato con esso. Per controllare la versione di npm, esegui npm -v nella riga di comando come mostrato di seguito -

Quindi abbiamo la versione 10 del nodo e la versione 6.4.1 di npm.

Per installare Angular 7, vai al sito, https://cli.angular.io per installare Angular CLI.

Vedrai i seguenti comandi sulla pagina web:

npm install -g @angular/cli //command to install angular 7
ng new my-dream-app // name of the project
cd my-dream-app
ng serve

I comandi precedenti aiutano a ottenere l'impostazione del progetto in Angular 7.

Creeremo una cartella chiamata projectA7 e installa angular/cli come mostrato di seguito -

Una volta completata l'installazione, controlla i dettagli dei pacchetti installati utilizzando il comando ng version come mostrato di seguito -

Fornisce la versione per Angular CLI, versione dattiloscritta e altri pacchetti disponibili per Angular 7.

Abbiamo finito con l'installazione di Angular 7, ora inizieremo con il setup del progetto.

Per creare un progetto in Angular 7, useremo il seguente comando:

ng new projectname

Puoi usare il nome del progetto che preferisci . Eseguiamo ora il comando precedente nella riga di comando.

Qui, usiamo il nome del progetto come app angular7 . Una volta eseguito il comando, ti chiederà informazioni sull'instradamento come mostrato di seguito:

Digita y per aggiungere il routing alla configurazione del progetto.

La prossima domanda riguarda il foglio di stile:

Le opzioni disponibili sono CSS, Sass, Less e Stylus. Nello screenshot sopra, la freccia è su CSS. Per modificare, è possibile utilizzare i tasti freccia per selezionare quello richiesto per la configurazione del progetto. Al momento, discuteremo di CSS per la configurazione del nostro progetto.

Il progetto angular7-app è stato creato con successo. Installa tutti i pacchetti richiesti necessari per l'esecuzione del nostro progetto in Angular7. Passiamo ora al progetto creato, che si trova nella directoryangular7-app.

Cambia la directory nella riga di comando usando la riga di codice data -

cd angular7-app

Useremo Visual Studio Code IDE per lavorare con Angular 7, puoi usare qualsiasi IDE, cioè Atom, WebStorm, ecc.

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

Fare clic su Download per Windows per installare l'IDE ed eseguire la configurazione per iniziare a utilizzare IDE.

Di seguito è riportato l'Editor -

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

Considereremo il angular7-appprogetto. Apriamo il fileangular7-app e guarda 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

The ng serve command builds the application and starts the web server.

Vedrai quanto segue quando il comando inizia l'esecuzione:

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

Una volta eseguito l'URL, http://localhost:4200/ nel browser verrai indirizzato alla seguente schermata:

Apportiamo ora alcune modifiche per visualizzare il seguente contenuto:

“Welcome to Angular 7!”

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 angular7-app / 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 cartella è dove lavoreremo sul progetto usando Angular 7.Inside src / app / cartella creata durante la configurazione del progetto e contiene tutti i file richiesti necessari per il progetto.

La cartella angular7-app / ha quanto segue file structure -

angular.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.
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 package.json nell'editor, ti verranno aggiunti i seguenti moduli:

"@angular/animations": "~7.2.0", 
"@angular/common": "~7.2.0", 
"@angular/compiler": "~7.2.0", 
"@angular/core": "~7.2.0", 
"@angular/forms": "~7.2.0", 
"@angular/platform-browser": "~7.2.0", 
"@angular/platform-browser-dynamic": "~7.2.0", 
"@angular/router": "~7.2.0", 
"core-js": "^2.5.4", 
"rxjs": "~6.3.3", 
"tslib": "^1.9.0", 
"zone.js": "~0.8.26"

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

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/ cartella è la cartella principale, che internamente ha una struttura di file diversa.

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 fa riferimento 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 dichiarazioni, importazioni, provider e bootstrap.

Possiamo vedere app-routing.moduleviene anche aggiunto. Questo perché avevamo selezionato il routing all'inizio dell'installazione. Il modulo è aggiunto da @ angular / cli.

Di seguito è riportata la struttura del file:

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

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

@NgModule viene importato da @ angular / core e ha un oggetto con le seguenti proprietà:

Declarations- Nelle dichiarazioni viene memorizzato il riferimento ai componenti. Il componente App è 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. C'è anche il modulo di routing aggiunto AppRoutingModule.

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 il tuo css qui. In questo momento, abbiamo aggiunto il colore di sfondo al div come mostrato di seguito.

La struttura del file è la seguente:

.divdetails {
   background-color: #ccc; 
}

app.component.html

Il codice html sarà disponibile in questo file.

La struttura del file è la seguente:

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center">
   <h1>Welcome to {{ title }}!</h1> 
   <img width = "300" alt = "Angular Logo" 
   src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp
   ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA
   2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma
   WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA
   zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2
   wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I
   DQwLjl6IiAvPgogIDwvc3ZnPg=="7> 
</div> 

<h2>Here are some links to help you start:</h2> 
<ul> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = "https://angular.io/tutorial">Tour of Heroes</a>
      </h2>
   </li> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = https://angular.io/cli">CLI Documentation</>
      </h2> 
   </li> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = "https://blog.angular.io/">Angular blog</a>
      </h2> 
   </li> 
</ul> 
<router-outlet></router-outlet>

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 = 'Angular 7';
}

app-routing.module.ts

Questo file si occuperà del routing richiesto per il tuo progetto. È collegato al modulo principale, ovvero app.module.ts.

La struttura del file è la seguente:

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

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 di angular7-app / folder 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.

<html lang = "en"> 
   <head>
      <meta charset = "utf-8"7gt;
      <title>Angular7App</title> 
      <base href = "/">
      <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 da app.component.html file.

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).catch(err => console.error(err));

Il platformBrowserDynamic (). BootstrapModule (AppModule) ha il riferimento del modulo padre AppModule. Quindi, quando viene eseguito nel browser, il file si chiama 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).catch(err => console.error(err));

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

bootstrap: [AppComponent]

Nel app.component.ts, c'è un selettore: app-rootche viene utilizzato nel file index.html. Questo visualizzerà i contenuti presenti inapp.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 del dattiloscritto.

La struttura del file finale sarà la seguente:

↰ Previous page Next page ↱

Angular7 - Configurazione del progetto

app

app.module.ts

app.component.html

app.component.spec.ts

app.component.ts

app-routing.module.ts

Risorse

Ambiente

favicon.ico

index.html

main.ts

polyfill.ts

styles.css

test.ts

tsconfig.app.json

tsconfig.spec.json

typings.d.ts

Tutorial Angular7