Ui-router inside custom angular directive, meaning?

Question

I am working on a separate user-defined scope directive that has several different states. Does it make sense to use ui-router / ui-view inside this directive to handle states?

This is a “note widget” listing notes. If there are no notes, it displays a message instead of a list, which says that they should add a note. If notes are loading, this indicates that notes are loading. If the user adds a note by clicking the add mentioned above, or +, then the view is a text field. Thus, there are at least 4 different species.

My initial instinct is that it will pollute the directive and make it hard dependent on ui-router and my application, as it determines the state. Did I just survive?

Answer 1

I would say this: yes, use ui-router , but not for the directive - use it for your application. In fact, best of all you can read a few blog posts and go through a sample application to understand the principles. You will soon realize that there is no need to use u-router in part.

from The basics of using ui-router with AngularJS (Joel Hooks)

... ui-router fully covers the state machine routing system. It allows you to define states and translate your application into these states. The real victory is that it allows you to separate the nested states and make some very complex layouts in an elegant way.

You need to think about your routing a little differently, but as soon as you go around the state approach, I think you'll like it ...

and here control AngularJS using ui-router (by Ben Schwartz)

... The most interesting thing in the new AngularJS router is not the router itself, but the state manager who comes with it. Instead of targeting a controller / view to render for a given URL, you are targeting state. States are managed in a hierarchical hierarchy that ensures the inheritance of parent states and the complex composition of page components, all of which remain declarative in nature ...

Here I have collected all the links, updated, aimed at an example, the most interesting piece of code sample.js ..

Summary , try to implement ui-router at the application level. The directive could then only be a guide, helping your users move around, walk between states ...