Share
Nella seconda parte della serie di tutorial per principianti della serie angolare, hai appreso quali servizi sono disponibili in Angular 4 e come scrivere i servizi angolari e usarli in un componente angolare.
In questa parte della serie di tutorial, imparerai come gestire il routing in Angular 4.
Inizierai clonando il codice sorgente dalla prima parte della serie di tutorial.
git clone https://github.com/royagasthyan/AngularComponent.git
Una volta ottenuto il codice sorgente, accedere alla directory del progetto e installare le dipendenze richieste.
cd AngularComponent npm install
Dopo aver installato le dipendenze, avviare l'applicazione digitando il seguente comando:
ng servire
Dovresti avere l'applicazione in esecuzione su http: // localhost: 4200 /.
Quando un utente accede a un'applicazione Web o a un sito Web, il routing è il mezzo per navigare all'interno dell'applicazione. Per passare da una vista a un'altra, l'utente fa clic sui collegamenti disponibili in una pagina.
Angular fornisce un router per semplificare la definizione dei percorsi per le applicazioni Web e per spostarsi da una vista a un'altra nell'applicazione.
Per implementare il routing nell'applicazione Web, farai uso del modulo Angular Routing. Crea un file chiamato app.routing.ts dentro il src / app cartella.
Per iniziare con l'implementazione del routing, è necessario importare il file RouterModule e Itinerari da @ angular / router.
importare RouterModule, Routes da '@ angular / router';
Avrai anche bisogno del ModuleWithProviders modulo per l'implementazione del routing.
import ModuleWithProviders da '@ angular / core / src / metadata / ng_module';
Crea ed esporta una variabile chiamata AppRoutes nel app.routing.ts, quale sarebbe una raccolta di tutte le rotte all'interno dell'applicazione Angular.
export const AppRoutes: Routes = [];
Esistono due modi per creare il modulo di instradamento: RouterModule.forRoot e RouterModule.forChild.
RouterModule.forRoot è per creare percorsi per l'intera applicazione, e RouterModule.forChild è per creare percorsi per moduli caricati pigri.
In questo tutorial, starai usando RouterModule.forRoot per creare percorsi per l'applicazione radice.
Crea il modulo di routing usando RouterModule.forRoot dentro il app.routing.ts file.
export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Aggiungi un percorso all'interno del AppRoutes lista per mostrare il nostro CalcComponent.
percorso: 'calc', componente: CalcComponent
Ecco come app.routing.ts aspetto del file:
importare RouterModule, Routes da '@ angular / router'; import ModuleWithProviders da '@ angular / core / src / metadata / ng_module'; import CalcComponent da './calc/calc.component' export const AppRoutes: Routes = [percorso: 'calc', componente: CalcComponent]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Come visto nel codice, il percorso che è stato aggiunto è / calc, che renderebbe il CalcComponent.
Importa il PERCORSO costante dentro il app.module.ts file.
import ROUTING da './app.routing'
Aggiungi il PERCORSO alla sezione delle importazioni.
importazioni: [BrowserModule, FormsModule, ROUTING],
Ecco come app.module.ts aspetto del file:
importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; import ROUTING da './app.routing' import AppComponent da './app.component'; import CalcComponent da './calc/calc.component' import FormsModule da '@ angular / forms'; importare RouterModule da '@ angular / router'; @NgModule (dichiarazioni: [AppComponent, CalcComponent], importa: [BrowserModule, FormsModule, ROUTING], provider: [], bootstrap: [AppComponent]) classe di esportazione AppModule
Salvare le modifiche precedenti e riavviare l'applicazione Angolare utilizzando ng servire.
Puntare il browser su http: // localhost: 4200 / calc e si avrà il CalcComponent visualizzati.
Con il percorso creato sopra, proverai a implementare la navigazione. Iniziamo creando un componente principale per la nostra applicazione chiamato HomeComponent.
Crea una cartella chiamata casa dentro il src / app cartella. Dentro il casa cartella, creare un file chiamato home.component.ts. Ecco come appare:
importare Component da '@ angular / core'; @Component (selector: 'home', templateUrl: 'home.component.html') export class HomeComponent
Crea un file modello chiamato home.component.html. Aggiungi il seguente codice ad esso:
Benvenuti in Home Page
Come visto nel codice sopra, hai usato routerLink per impostare la navigazione del collegamento. routerLink è importato dal RouterModule.
Aggiungi il HomeComponent al NgModule nel app.module.ts file.
importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; import ROUTING da './app.routing' import AppComponent da './app.component'; import CalcComponent da './calc/calc.component'; import HomeComponent da './home/home.component'; import FormsModule da '@ angular / forms'; importare RouterModule da '@ angular / router'; @NgModule (dichiarazioni: [AppComponent, CalcComponent, HomeComponent], importa: [BrowserModule, FormsModule, ROUTING], provider: [], bootstrap: [AppComponent]) classe di esportazione AppModule
Poiché utilizzerai il routing angolare, devi visualizzare la posizione nella nostra applicazione in cui il router visualizza le viste. Come hai fatto il bootstrap AppComponent in fase di esecuzione, aggiungere il seguente codice al app.component.html file.
La presa del router indica al router angolare dove visualizzare le viste.
Dentro il app.routing.ts file, includere il percorso predefinito da visualizzare come HomeComponent. Ecco come appare il codice modificato:
percorso: ", componente: HomeComponent
Ecco come app.routing.ts aspetto del file:
importare RouterModule, Routes da '@ angular / router'; import ModuleWithProviders da '@ angular / core / src / metadata / ng_module'; import CalcComponent da './calc/calc.component'; import HomeComponent da './home/home.component'; export const AppRoutes: Routes = [percorso: ", componente: HomeComponent, percorso: 'calc', componente: CalcComponent]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Salvare le modifiche precedenti e riavviare l'applicazione Web. Puntare il browser su http: // localhost: 4200 / e si avrà il HomeComponent visualizzato di default.
Clicca sul link nel componente home e sarai indirizzato al componente calcolatrice.
Ora aggiungiamo un percorso per gestire le richieste di routing non definite. Ogni volta che l'utente naviga verso una rotta inesistente, viene visualizzato un messaggio che indica che la rotta non è stata trovata.
Aggiungi un nuovo componente chiamato non trovato. Crea una cartella chiamata non trovato dentro il src / app cartella. Crea un file chiamato notfound.component.ts. Aggiungi il seguente codice:
importare Component da '@ angular / core'; @Component (selector: 'notfound', templateUrl: 'notfound.component.html', styleUrls: ['notfound.component.css']) classe di esportazione NotFoundComponent
Crea un file chiamato notfound.component.html e aggiungi il seguente codice:
Componente non trovato
Aggiungerai un percorso con caratteri jolly per gestire rotte inesistenti. Aggiungi il seguente codice al app.routing.ts file:
percorso: '**', componente: NotFoundComponent
Ecco come app.routing .ts aspetto del file:
importare RouterModule, Routes da '@ angular / router'; import ModuleWithProviders da '@ angular / core / src / metadata / ng_module'; import CalcComponent da './calc/calc.component'; import HomeComponent da './home/home.component'; import NotFoundComponent da './notfound/notfound.component'; export const AppRoutes: Routes = [percorso: ", componente: HomeComponent, percorso: 'calc', componente: CalcComponent, percorso: '**', componente: NotFoundComponent]; export const ROUTING: ModuleWithProviders = RouterModule .forRoot (AppRoutes);
Salvare le modifiche precedenti e riavviare il server. Puntare il browser su http: // localhost: 4200 / abc e verrà visualizzato il messaggio di eccezione non trovata.
In questo tutorial, hai imparato le basi su come gestire il routing in Angular. Hai imparato come definire un percorso e navigare attraverso un'applicazione Angolare.
Hai imparato come gestire percorsi inesistenti definendo un percorso con caratteri jolly. Hai imparato a usare routerLink per collegare a un'altra rotta.
Come è stata la tua esperienza di apprendimento del routing angolare? Fateci sapere i vostri pensieri e suggerimenti nella sezione commenti qui sotto.
Il codice sorgente di questo tutorial è disponibile su GitHub.
Accentsconagua