Angular 5 routing with components
Hi Learner am thankful to you, to learning this article. In this article you will be learning about Angular 5 Routing & Navigation and Angular 5 routing with components
Before diving into this article have look on previous articles, From previous articles you learned about all basic components on Angular 5.
In this article you will be learning about
What Is Routing?
Routing is the process of switching in-between multiple view based on selected path to display date on web browser.
If the user navigate to different view in your application but the application will be a SPA (Single Page Application), without page reloading or user don’t have leave experience
You need to create multiple components to work with angular routing .in this Example you will be creating three components with name home, about and user.
The Creation of Angular Components are as showed below, For more information take a look on Angular components
The creating of three components with Angular CLI
Import and Decorate Routes
After Creating components you need to import that components in app.module.ts
Here you will be working with Angular routes ,so you need import all prerequisites like RouteModule ,Routes from @angular/router
After import all prerequisites, you must added all created components in declaration of @NgModule
Now Decorate all Routes with constant , in this case the name of the constant is appRoutes. constant variables will be useful to capture routing information
Import constant route in Import section of the app.module.ts.
After import and decorate all components in app.module.ts
Configure Routing in appRoutes Variables
const appRoutes:Routes =[
Comments on Configure Routing
Routes tell the router which view to display when a user clicks a link or pastes a URL into the browser address bar.
A typical Angular Router has two properties:
- path: a string that matches the URL in the browser address bar.
- component: the component that the router should create when navigating to this route.
- RouteModule.forRoot() You first must initialize the router and start it listening for browser
- After Added sample markup in created components then the output is
Sample output of Angular Routing
From the above example there is no navigation action without any path string in URL .According above one if the user entered
4200/home -> navigate to home page
4200/about -> navigate to about page
4200/userlist -> navigate to user-list page
4200 -> no navigation
4200/some dummy text -> no navigation
redirect to home page, if there is no path name in URL and if the user give improper path name. then the appRoute constant variables is
Sample output of Angular Routing
Thanks For Reading this article ,like and share this post.In next Article you will be implement sample navigation With Angular 5 Routing with Boostrap. Don’t forget take a look on next article 🙂
Learn Angular 5 Step by Step
Angular 5 Flow-Chart ,The Entry point of any Angular js application is main.js form main.ts file the control will be moving to app.module.ts. How the control is moved form main.ts to app.module.ts bcz of the Angular CLI was import the app module and bootstrap that module.
Angular 5 Components like What is Component?, What is the use of the component?, How you can use these components in Angular Application.Components are basic building block of an angular js application ,each and every component must be belongs to @node module in order to access for another component in Application
Tow way Binding Data binding is a communication in between type script code of the component and templateURL of the component ,to render sample markup on web browser .if you want to render sample html of the component then you used string interpolation
Directive are will be giving instructions to DOM ,how to render text on web browser. With help of directives you can manipulate the DOM Elements. Components are one type of Directives