Angular 6 Routing

Hey guys I am back again with some crazy and cool stuff to know in the journey to learn angular 6 cli version.  Following to my recent blog you guys came across some of the topics i have covered.
Like

1. Components
2. Services
3. Dependency Injection
4. MVC architecture
5. Modularization

I am sure you guys now have little bit idea about these all topics  and i am pretty sure I have make all the discussion short and crisp.


Today I am going to post some of the favorite angular concept like routing In Angular.


In the traditional way of routing we do using HTML href which have no control over the authentication.

So here in angular we are leveraging the benefits of using framework like a pro.

 Angular came for Developing Single page Application Which helps the developer to focus and design the application in a parent child relative way.


Lets say we have to component A and B

And we have no relation between them and we need to show both of the view at the same time so without wasting time we can wrap both of the view in the common view.

With having certain case we want some page to appear while we clicked we can either change the view of the page or re-use the page depending on the logic and requirement.

While If the case is to change the page we came up with the term called routing.

Angular have very pretty routing guidelines while leverage you a lot of stuffs to taken care by then in your behalf

Some of them is : Authentication Hooks,Routing parameter, back link info and so on and so forth.but the point you guys are wondering how to use.


Its pretty simple but this time you need to take care how it displays those routed page in the single page environment.

we use router outlet tag for the place where we want the page should appear while we route the page.

and for each linking page we use routeerlink .

So what happens in the behind angular checks the out the routelink corresponding component :

I am really sorry👅 , I forgot to tell you, At very first of starting your angular cli project , you must be get questioned like " do you want app-routing in your page" . Actually this page means a lot for routing your page.

This page includes all the component mapped with the routelink we want to wrote previous.


Routes=[
{paths:"" component:""} ,
 ...... 
]

type of things..

Later under the hood its angular uses this routing page to mapp the route. I told you some of the benefits like authentication in the client side is provided by the angular.

If you wish certain page gets open only when the guy is autherised to do so in that case angular gives you hook to check and then give the permission to nevigate.

I will give you some jargon like it have CanActivateRoute ... many hooks you can check out the syntax which is pretty easy to implement using angular Auth gard cli command.

I wish you guys definetly learned some cool stuff this time I am sure it wasn't much for geeks but efficient.
Thanks and stay connected.


Find my profile over linkLink :https://www.linkedin.com/in/kripa-shankar-jha/