Why UI router if I can use directives?

Question

Well, I have never used and never felt like that I should use the UI router. I was asked in one of the interviews about this and so felt like reading if I am missing something out as an AngularJs developer.

Now, the explanations on internet displays it's strength based on the modularity and reusability of the components. Nesting of views etc.

If I want to reuse components in my view, then can't I use directive instead of a new state? According to this article by scotch.io(top google result) for ui router we can use separate data /controllers in my view. Well, can't I do the same via directive's controller and template. I can still reuse as many times as I want it.

Please let me know if I am missing some cool feature and makes it quintessential to use it in an AngularJs application (yeah a larger one with lots of reusable components of course) .

Answer 1

AngularJS is a framework for Single Page Application.

Single Page Application (SPA)

Single Page Application is a web application that loads single HTML page and dynamically updates a fragment in the page as the user interacts with the app.

John Papa's blog explains SPA in simple terms.

The biggest advantage of SPA that I see is

• once the application is loaded, the state is maintained without requiring server roundtrip when user navigates.

• Users can bookmark deep link into your application. SPA framework (AngularJS) will take care of loading the required state when user open bookmark.

Although it is technically possible to achieve the above in a non-SPA application, it was never as simple as SPA.

SPA is useful for highly complex applications with many pages. For simple applications with 2-3 pages jQuery is the way to go.

Read Single Page Application: advantages and disadvantages for more discussions

You probably know all these and I think you are trying to achieve SPA using directive.

Routing

Routing framework loads a view dynamically based on user action into the main page without refreshing the whole application; providing SPA effect.

There are two popular AngularJS routing frameworks available.

• ngRoute
• UI-Router

ngRoute is based on URL mapping and UI-Router is based on state name mapping. I prefer UI-Router.

Routing vs Directive

Now, the explanations on internet displays it's strength based on the modularity and reusability of the components. Nesting of views etc.

Yes directive is used for modularity and reusability and can load views dynamically but cannot choose a view dynamically based on user action. You have to write complex conditions within directive to choose a view dynamically.

For example, if you have an application with 3 links and you need to show a view based on the link user clicked.

Using directive you need to keep track of what the user clicked and write a mucky condition to choose a view to display. Most of the time you will fail to achieve the effect because the link can be accessed in multiple ways.

On the other hand, once routing is configured, the corresponding template will be dynamically loaded when user clicks the link. It is way easier to change the view based on user action.

Another advantage. When user opens a bookmark deep linked into the application, routing framework will take care of loading the sate (It is impossible to achieve this using directive). It feels more natural way of designing an application.

Choice is yours.

Answer 2

The whole point of the router is that it uses the URL to change states. If you just used directives, you would have to write your own mechanism for syncing up URLs with specific directives.