0

I am trying to learn and understand the capabilities of UI-router with Angular 1.3.15.

I am trying to set up an application which has many views that have a header and footer directive. It also has a smaller number of views that do not need this setup, with the loaded view taking up the entire page.

Therefore, it seems I should handle this divergence "one level down", as in my diagram below. In the past, I have worked on ui-router apps with the index.html coded with the header/footer directives and a single ui-view for the other pages to load into. This time I am trying to get it correct form the start. Opinions and advice welcome.

enter image description here

Improve this question
3
  • 1
    Seems legit. However, you might like to know that you can also completely replace a view higher up in the hierarchy if necessary, either by name or by relative/parent reference. For example, if your header/footer were rendered in the root view, a child view could still replace them. Commented Apr 3, 2015 at 22:55
  • P.S. you probably want to clarify your question. What exactly do you want from the community, again? Commented Apr 3, 2015 at 22:56
  • This time I was just looking for opinions, and to verify that my concept was viable. Commented Apr 4, 2015 at 2:33

1 Answer 1

Reset to default
2

I'm not sure what you want to know.

Yeah, you should handle the difference in templates the way you suggested: the root template should contain only the elements which appear on all states. Elements which appear on some states should go on those states templates, in the template of a parent state (if it makes sense), or in directives that you reuse in the various templates.

Instead of directives, you might want to use named views if your templates have some peatures in common, but the differences between them are not inside a single DOM element. For example, maybe all your pages have a small toolbar on top that always has some buttons, but other buttons depend on the state you are in. You can place that constant part of the toolbar in the root template, together with a <div ui-view="toolbar"></div>. The states would then define a view named toolbar with a template with the buttons they want to add.

You could make a directive for that toolbar with all the global buttons in its template and use <ng-transclude> to add the custom buttons at each state's template, but using named views seems cleaner.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.