Angular 5 – Getting started ( Hello world with Routing/Navigation ) – Angular 5 Tutorial 1

Angular 5 – Getting started ( Hello world with Routing/Navigation ) – Angular 5 Tutorial 1

In this Tutorial, im going to teach you how to get start with angular 5 and do some simple routing (navigation).
First install angular cli. Go to https://cli.angular.io/ and follow the instructions. After setting up your angular cli, we can make a new angular app by simply typing below code in your command prompt or console.

ng new yourProjectName

then go inside to your project root directory, and make a new component by using below command. I am going to make two components. One for login page and another one for home page.

ng g component login

then,

ng g component home

to run and test your app, run the following code.

ng serve

Now our app is working fine. But this is default hello world page of angular js. To open our login component as your default first page, we need to add routes to our app. We don’t need third party plugins for this. To start this part of development, go and open your app.modules.ts file and add the routes.

First, we need to import   RouterModule and Routes from angular package. To do that just simply put below import to your app.modules.ts file.

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

Then after that, make a array name appRoutes and put all your paths and components inside as shows below.

const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home',      component: HomeComponent }
];

then add it to imports array as shown below.

RouterModule.forRoot(appRoutes)

final code for app.module.ts will look like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { RouterModule, Routes} from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home',      component: HomeComponent }
];
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FlexLayoutModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

now as you can see, login component’s path is empty. Because it will be the root path of our project. We are pretty much finish now. Only one thing to do now. Just open your app.component.html and add following tags.

<router-outlet></router-outlet>

this is the place where your components are rendering. Each and every time when you navigate to a page, that specific component will render inside these tags. That’s all.

If you have any question, please feel free to comment or contact me. Cya…

I am Pasindu dineth peiris and im working as a software engineer. Im mainly working as a mobile application developer, but i love to work with python and other languages also. Im good with android, ios and also with cross platform frameworks like ionic 2, Nativescript, Fusetools. Using this website i am going to teach what i learn. KIT..

4 Replies to “Angular 5 – Getting started ( Hello world with Routing/Navigation ) – Angular 5 Tutorial 1”

Leave a Reply

Your email address will not be published. Required fields are marked *