Creating Your First Angular App: Implement Routing

Before going ahead with this tutorial, it is a good idea to summarize everything we have done so far in order to avoid any confusion and errors. If you have missed any of the steps from the last three tutorials, it is a good idea to go back and make the necessary changes.

In the second tutorial, we created three different files named country.ts, country-data.ts, and country.service.ts. The country.ts file is used to store the Country class definition so we can import it to different files. The country-data.ts file is used to store an array named COUNTRIES. 

This array stores all the country objects that we want to display inside our app. The country.service.ts file is used to define a CountryService class with all the methods that we are going to use to access the information about different countries in one place. The methods of the CountryService class are used to get the top countries based on criteria like population and area or find information about a country with given name.

In the third tutorial, we created the HomeComponent for our app. This was done with the help of three different files named home.component.ts, home.component.html, and home.component.css. The home.component.ts file contained the definition of the HomeComponent class with different methods and properties to access and store information about all countries. 

The methods inside the HomeComponent class relied on the methods defined in country.service.ts to get all the data. The home.component.html file is used to store the template which will be used when displaying all the data accessed by methods defined in the home.component.ts file. The home.component.css file is used to provide different style rules which will control the appearance of different elements inside our template.

In the fourth tutorial, we created two more components for our app. For the AllCountries component, we created files named all-countries.component.ts, all-countries.component.html, and all-countries.component.css. For the CountryDetail component, we created files named country-detail.component.ts, country-detail.component.html, and country-detail.component.css. Just like the HomeComponent, the .ts files contained the logic for our components, the .html files contained the template, and the .css files contained different rules that were applied to the elements in the template files.

In this tutorial, we will be implementing routing in our app. This way, the users will be able to navigate from one component to another with ease.

Modifying the Application Shell

Now, we just need to make changes to the application shell for our app to start working. The app.component.ts file will stay exactly the same as it was in the first tutorial.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Fun Facts About Countries';
}

However, we will be making changes to the app.component.html file. The HTML file should now have the following code:

<h1>{{title}}</h1>
<nav>
  <a routerLink="/home">Go Back to Homepage</a>
  <a routerLink="/all-countries">List of all Countries</a>
</nav>
<router-outlet></router-outlet>

Earlier, we were only showing the title of the app. Now, we have also added navigation to the template. The routerLink directive is used to provide links to different sections or pages of your app. Angular determines the component that it needs to display with the help of the routerLink directive. The position where those components are rendered is controlled using routerOutlets. The components are rendered after the router-outlet tags.

After creating the template file, we will add the following CSS to app.component.css to style the navigation links and the heading:

nav {
  margin: 0px;
  text-align: center;
}

h1 {
  font-family: 'Lato';
  color: #999;
  text-align: center;
}

h2 {
  font-size: 2em;
  margin-top: 0;
  padding-top: 0;
}

nav a {
  padding: 10px;
  text-decoration: none;
  margin: 10px 0px;
  display: inline-block;
  background-color: black;
  color: white;
  border-radius: 5px;
  font-family: 'Lato';
}

nav a:hover {
  background-color: gray;
}

nav a.active {
  color: #039be5;
}

Now we will be telling Angular which components need to be rendered for a particular route or path. Create a file named app-routing.module.ts inside the src/app directory and put the following code in it:

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

import { HomeComponent } from './home/home.component';
import { AllCountriesComponent } from './all-countries/all-countries.component';
import { CountryDetailComponent } from './country-detail/country-detail.component';

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'detail/:name', component: CountryDetailComponent },
    { path: 'all-countries', component: AllCountriesComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

We begin by importing all the necessary dependencies, including the components that we want to render for different routes. After that, we specify different paths and the components that should be rendered when users visit those paths. You can also redirect paths, as we did for this country information app. Whenever users visit https://localhost:4200/, they will be redirected to https://localhost:4200/home. Please keep in mind that specifying redirect routes requires you to specify a value for the pathMatch property to tell the router how it should match a URL to the path of any route.

If users visit https://localhost:4200/all-countries, we will render AllCountriesComponent after the router-outlet tag inside the app.component.html file to display a list of all countries.

We have used the routerLink directive inside the templates for AllCountriesComponent as well as HomeComponent to provide a link which users can click on to read more about any country. The value of routerLink for each country rendered within those templates follows the format routerLink="/detail/{{country.name}}". The value of the path property for rendering CountryDetailComponent has been specified as detail/:name, keeping the value of the routerLink directive in mind. The :name part in that path is used to identify the name of the country.

Updating the app.module.ts File

The last thing that we need to do in order to have a fully functioning Angular app is update the app.module.ts file. If you open this file in a text editor, you will notice that all three components that we generated using the Angular CLI have been already imported inside the file. Before we make any changes, your app.module.ts file should have the following code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CountryService } from './country.service';
import { HomeComponent } from './home/home.component';
import { AllCountriesComponent } from './all-countries/all-countries.component';
import { CountryDetailComponent } from './country-detail/country-detail.component';

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

export class AppModule { }

There are only two changes that we need to make to the app.module.ts file. First, we have to import the AppRoutingModule class from the app-routing.module.ts file that we created in the previous section. Second, add the class to the @NgModule.providers array. After these changes, your app.module.ts file should look like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CountryService } from './country.service';
import { HomeComponent } from './home/home.component';
import { AllCountriesComponent } from './all-countries/all-countries.component';
import { CountryDetailComponent } from './country-detail/country-detail.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AllCountriesComponent,
    CountryDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [CountryService],
  bootstrap: [AppComponent]
})

export class AppModule { }

If you move to your project directory and type the following command in the console, your app will load and render the HomeComponent.

ng serve --open

You can click on various country blocks or the navigation links to load different components.

Final Thoughts

In this series, I wanted to teach readers who have never used Angular before how to create a basic Angular app. The app started functioning properly only after we completed our last tutorial. This was intentional because I wanted to avoid moving back and forth between the same files making changes that would need to be overridden in later tutorials. This could be very confusing for a beginner, so we just made all the changes to a file at once.

For practice, you can try creating more components which display the information about the countries in a different format. 

Furthermore, if it's not clear, JavaScript has become one of the de facto languages of the web. It’s not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as Angular has demonstrated in this tutorial. If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato Market.

If you have any questions related to this or any other tutorial of the series, please feel free to comment.