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 app–routing —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. 🙂
