1

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) .

HalfWebDev
  • 7,022
  • 12
  • 65
  • 103
  • Probably you find the answer here : http://stackoverflow.com/questions/22790209/angular-ui-router-ui-views-vs-directives – Varit J Patel Jul 10 '16 at 05:30
  • No it doesn't. My reply to accepted answer at that link is as follows : In how many cases do we encounter a full template as a directive? And directives when used for partial views already have a parent template. Nice feature to list but doesn't seems practically usable or convinces to use and include ui-router in my project file. – HalfWebDev Jul 10 '16 at 05:39

2 Answers2

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.

hsiung
  • 217
  • 1
  • 5
  • My question is not about routing in general but the ui router in specific. What you have explained can also be done via ngRoute. That's all m saying. Then for reusability for example a left sidebar, header, footer I can always use directives without providing states of ui router.Isn't it? – HalfWebDev Jul 10 '16 at 13:17
  • Sorry I'm a little confused by your question, you seemed to be asking about the difference between ui-router and directives. My point in my answer was they are totally separate things. Yes, ngRoute does the same thing, they are both modules designed for routing. Not sure what you are comparing with directives. In a good application structure, you have states, which are simply composed of many directives/components. So for building modular reusable pieces of an application, yea you would totally use directives/components. Sorry I don't know if I'm helping :P – hsiung Jul 10 '16 at 16:34
0

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.

Community
  • 1
  • 1
Kalyan
  • 1,781
  • 11
  • 15
  • I quote `For example, if you have an application with 3 links and you need to show a view based on the link user clicked.` I don't need to do directives handling for this example. I can simply do this by ng-if, ng-show. Ui router for this alone ? M not buying – HalfWebDev Jul 10 '16 at 13:21
  • What if the link is accessed from browser? Think. Pls read my updated comment on accessing deep linked bookmark. – Kalyan Jul 10 '16 at 13:22
  • Okay, so we are throwing the user away from the picture for above example now and the link is simply going to accessible via browser. Have you heard of route params ? Something which goes like this in config function... `products/:id` – HalfWebDev Jul 10 '16 at 13:27
  • You can achieve in both ways. But it is only harder with directive. Routing caters for all scenarios. Choice is yours. By the way route param is related to routing. Good luck. – Kalyan Jul 10 '16 at 13:30
  • Don't have a clue of the scenarios you talk about? You got the question wrong. I am not handling states or routing with directives at all. NG route being at it's own place just compared it with scotch.io's example of using ui router when we use different views. Thanks for discussion – HalfWebDev Jul 10 '16 at 13:34