How to write AngularJS Components with nested routing using TypeScript?

One of technique to compose Angular Components is to write child or grand-child component(s) nested under a top-level component using the new Component Router. This is useful when you have hierarchical data to present to the user. In this post I’ll tell you how to write AngularJS Components with nested routing using TypeScript.

I’ve written some posts that covers the basic and important concepts of Components: how to use AngularJS Components with TypeScript and how to use AngularJS Component Router with TypeScript.

Scope

The scope of this post is to extend the Review-Details component introduced in the posts linked above to use some new child components with the help of nested routing. If you follow previous and current post, then you will have following by the end of this post:

AngularJS Component nested routes

AngularJS Component nested routes

Nested Component(s)

If you are using component router in your application and you will have a top-level component that contains routing rules. If you need to present hierarchical information to the user, one of the way is to link independent components with the help of nested routing. This concept was missing from ng-Route and that was one of the reasons developers used ui-router module.

Let us discuss the important bits that we need to implement.

Non-terminal Routes

To extend a route to have nested routing, extend this parent route to define it as a Non-terminal route. We need to tell the Router that Review-Details route definition is non-terminal, that it should continue to match Routes in its child Components. We do this by adding a continuation ellipsis ... to the path of parent route as shown below:

Line no. 8 above uses ... within path. Without the continuation ellipsis the Details route will never find any nested routes as the router will stop at this level and will not bother to match the rest of the URL.

Route rules in child Component

Just like routing rules in top-level component, now due to addition ... router will expect to find routing rules inside reviewDetails component. This was created in my previous post linked above and below is the updated source:

Line no. 24 defines some routing rules that is similar to way of writing rules in top-level component as well. The only difference is that router will now prepend /details/:id and /overview to process any requests for /details/:id/overview. Same is for path with menu and contact values.

I’ve also added 3 new simple components that just have hard-coded template. This can also have real information about a restaurant’s overview, menu and contact that can be either cached or request from the server on-demand.

ngLink Directive

We need to use ngLink directive to present links in the view so that user can navigate from overview to menu or contact view.
The updated source for review-details.component.html is shown below:

Notice that this view also has a ngOutlet directive that is responsible for working as a shell to show view for overview, menu and contact components.

Due to addition of nested routes above, we also need to change anchor tag’s source in reviewList component as shown below:

Notice the anchor element on line no. 24 that uses ngLink with a third parameter to instruct to router that when you invoke Details also invoke the nested overview route. This is the same syntax if you want to navigate from controller as shown below:

If you don’t add Overview in anchor or $router.navigate method, you will get an error in the console as shown below. Router is confused as it understands the next Details uses non-terminal syntax but the link doesn’t specify a nested route name to invoke! e.g. Overview.

Writing what to invoke as a nested route can be bad for maintenance if you need to change it later. Alternatively, you can use useAsDefault member to define a route like this:

Now the error above will be resolved.

Above are the main steps one needs to add to add nested routes so that component can work as a parent-child relationship. This post extends my previous post and shows only the changed part of the source code.

This sums up my post that tells you how to write AngularJS Components with nested routing using TypeScript. Let me know if you face any issues in the comments and I’ll try to help you. Learn more about Components using AnguarJS documentation. If you would like to learn more about how to integrate AngularJS and TypeScript, refer to my AngularJS posts. If you want to learn something specific then get in touch and I’ll write a post about it.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger