How to use AngularJS Component with AngularUI Router?

I published a post few days back that tells about the basics of routing and available options to route AngularJS Component. In this post, I’ll tell you how to use AngularJS Component with AngularUI Router.

The linked post above explains following options that can be used for routing: ngRoute, AngularUI Router and Component Router. As per the official AngularJS documentation, component router has been deprecated. They have advised to either use ngRoute or ui-router. This post will just illustrate the possible options with ui-router.

Given following AngularJS V1.5 component definition, let us look at the possible options to render the component using routing.


Option 1: Use a template: and access data using $resolve

If you are working with ui-router version 0.2.x, the only way to render components is mentioned below. This is similar to the ngRoute way of using rendering a component using template member as shown in the linked post above.

The options mentioned below needs ui-router version 1.0.

Option 2: Route to the component by name.

This requires each component bindings to match a resolve name and this uses component member to tell the name of the component that is already registered in app as shown in the code below:

Option 3: Route to the component by name + bindings mapping object

Use this option to allow resolve names to be mapped to the bindings of component using an object. This is useful when the resolves may come from parent states, so the mapping to the bindings is easy.

State with resolve & multiple named views

I’ve seen posts where developers use multiple views and try to resolve objects in wrong way. The resolve keyword MUST be relative to state not views (in case you use multiple views), as shown in the code below:

This sums up my post that tells you how to use AngularJS Component with AngularUI Router. Let me know if you face any issues in the comments and I’ll try to help you. 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