Angular Sample Application – Part 3 – The End

Hello Geek, Good Morning. I hope you have a great weekend going. I wake up early today to write something about Angular.

I am going to post about how to create a sample application in Angular. That will be a good starter in your Angular learning. ūüôā

I hope you have read the Part – 1 of this tutorial, if not then do not worry, read it here¬†Angular Sample Application ‚Äď Part 1

I hope you have read the Part – 2 of this tutorial, if not then do not worry, read it here¬†Angular Sample Application ‚Äď Part 2

So, let’s start.

Routing is a very important part of Angular. Routing will create a fancy url and you can attach the component to that URL.

To add routing execute following command in terminal.

ng generate module approuting flat module=app

--flat puts the file in src/app instead of its own folder.
--module=app tells the CLI to register it in the imports array of the AppModule.

Now we will make a change in this file.

We will create route for HomeComponent.

Create one route variable of type Routes.

const routes: Routes = [
¬†¬†{¬†path:¬†”,¬†component:¬†HomeComponent,¬†pathMatch:¬†‘full’¬†},
];

Also Please change the following code of NgModule.

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

You need to include HomeComponent, So please add the following line at the top.

import¬†{¬†HomeComponent¬†}¬†from¬†‘./components/home/home.component’;

Now your file will look like this:


We have completed the routing declaration part.

We need to add router-outlet to load dynamically components in an Application.

app-component.html is the main component of the application. We will add router-outlet in app-component.html.

So please add following line in app-component.html

<router-outlet></router-outlet>

We will add header and footer components in app-component.html to load the header and footer in all components.

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Now open http://localhost:4000 in the browser.
You will see the following output.

Cheers! You have successfully learn How to create an Angular Sample Application. ūüôā


You can also download this demo from Github: https://github.com/jaydippanchal776/angular-sample-project

Author: Jaydip Panchal

Hello, This is jaydip panchal here, who do code, dream code, eat code, drink code, walk code. #CodeWithJaydip #CodeWithGeek

Leave a Reply

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