Hi !guys In here I am going to explain you how to work with angular routing.
Any angular application you built is going to have multiple components. Each component has own view. We need to navigate those views when user perform an action. For this purpose we use routing.
Moreover if you want to navigate to different pages in your application, but you also want the application to be a single page application(angular provides this facility),with no page reloading you can use this routing.
Hopefully, this will help you realize the advantages of using multiple modules inside a project and how the lazy content loading helps your application perform better.
Hopefully, this will help you realize the advantages of using multiple modules inside a project and how the lazy content loading helps your application perform better.
Here you can see how to use routing with very simple exercise. Here you can see the name top of the screen as 'TOYS PARADISE' .Then there is a link to back to Home screen.
Then there are three links . I have used here as unordered list .one for about us, another one for services and the last one for other.
To get above output do following steps.
1.Create new angular project (ng new your_project_name )
After you create your new project to do the exercise, go to app.component.html and delete everything there. After when you run loaclhost:4200 you will see a blank page.
2.Create components folder
3.Inside components folder create following components.
i.create first component for home( ng g c components/home )
ii.create second component for about us (ng g c components/aboutus)
iii.create third component for services(ng g c components/services)
iv.create fourth component for other (ng g c components/other)
4. Inside app.module.ts you can see following things.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { RouterModule,Routes} from '@angular/router';
import { ServicesComponent } from './components/services/services.component';
import { OtherComponent } from './components/other/other.component';
import{AboutusComponent} from './components/aboutus/aboutus.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutusComponent,
ServicesComponent,
OtherComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{path:'aboutus',component:AboutusComponent},
{path:'services',component:ServicesComponent},
{path:'other',component:OtherComponent},
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
When you creating components it will automatically import those components from CLI as above of the code.You can see those components also include under @NgModule .
@NgModule takes a metadata object that describes how to compile a component's template and
how to create an injector at run time.It identifies the module's own components,directives and pipes making some of them public through the export property.So external components can use them. @NgModule can also add service providers to the application dependency.
Modules are a good way to organize an application and extend it with capabilities from external libraries.
When we consider about NgModule metadata , It does the following things.
- Declares which components,directives and pipes belong to the module.
- Make some of those components ,directives and pipes public . It is easy to other module's component templates to use them.
- Imports other modules with the components,directives and pipes that components in the current module need.
- Provides services that the other application components can use.
Moreover every Angular app has at least one module.It is the root module.
Router imports
import { RouterModule,Routes} from '@angular/router';
See above one.The angular router is an optional service that presents a particular component
view for a given url. It is not a part of the angular core. It is in its own library package (@angular/router). Import what you need from it as you would from any other angular package.
I also have to say a routed angular application has one singleton instance of the router service.
When the browsers url changes, that router looks for a corresponding route from which it can
determine the component to display. A router has no route until you configure it.
Under RouterModule.forRoot() method It creates a module with all the router providers and directives. It also optionally sets up an application listener to perform an initial navigation.
Then , when we go through app.component.html we can see the following things there.
<h1>TOYS PARADISE</h1>
<a routerLink= "/">Back to Home</a>
<ul>
<li><a routerLink="/aboutus">ABOUT US</a></li>
<li><a routerLink="/services">SERVICES</a></li>
<li><a routerLink="/other">OTHER</a></li>
</ul>
<router-outlet></router-outlet>
Here you can see router-outlet. It is a directive from the router library that is used like a component. It acts as a placeholder that marks the spot in the template where the router should display the components for the outlet.
<router-outlet></router-outlet>
Router Links
In our app.component.html we can see router links with anchor tags.They helps to navigate url directly from the browser address bar.
See the final result through following video. when I click the ABOUTUS ,It gives aboutus works! as in same page. That means it show you to aboutus.component.html content there. Changing it you can also get different output in same page. Then I click Back to Home , it comes to home page.
See how it changes when i am clicking aboutus,services,others and back to home in the address bar.
Hope to see you next day with another simple example.
