3

[EDIT]

Similar question to Complex nesting of partials and templates

As of now, is it better to use Angular-UI state solution or should I stick with ng-includes ?

So far I had one view per URL in my AngularJS application. I need to build a new view, which should have 3 tabs and I'm having troubles trying to figure out how I'm going to design the view - architecture-wise that is.

Note that the business model object behind these 3 tabs is the same one.

The first tab is for viewing and editing data on the business object. So that's already two 'views' within the first tab.

The second tab is for viewing a paged-table showing data from a child collection of the business object.

The third tab does the same thing as the second one but for another child collection.

Obviously, I do not want to load the entire business object at once. I'll load the collections only if the user navigates to the 2nd or 3rd tabs.

My main concern right now is how am I going to organize the views ? AngularJS has this limitation of only 1-view per page.

Also, I need to handle browser history, so the URL must change when a tab is selected, but I should have to reload any data (i.e I must not reload the controller).

Any tips would be much appreciated.

Improve this question
5
  • You can use ng-show, ng-hide, ng-include etc. to show hide content based on certain variables. these can be set on the main controller on route change. regarding the controller, you can let the controller reload, just add cache your objects and not load them again if they are loaded. Commented Apr 26, 2013 at 19:51
  • What about the view ? The HTML for the edit form is already pretty large. If I had more (that is, the tabs and their content) that's going to end up very big. How can I separate the html of the 3 tabs ? Commented Apr 26, 2013 at 22:18
  • put each one on their own html partial file. use ng-include with the url. ng-include can be used with ng-show / ng-hide. Commented Apr 26, 2013 at 23:14
  • ok, somehow it just seem a little strange having to implement all this logic by hand. Using routing and views is much easier to handle. It's a shame multiple-views per page is not allowed Commented Apr 27, 2013 at 7:45
  • I've updated my original post and I'm now wondering if I should use Angular-UI state solution ? I'm reluctant to using 3rd party solutions, but on the other hand AngularJS routing system seems to be its Achilles' heel Commented Apr 27, 2013 at 15:30

1 Answer 1

Reset to default
2

For the record, I ended up using ui-router and its state management, which is awesome. It took me a bit of time to understand the concepts and to put that in practice, but I managed to build a pretty complex set of layouts effortlessly !

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

1 Comment

I'm suffering from the same 'barrier to entry'; I'm having a hard time fathoming the inability to really re-use views through the native routing instead of violating DRY by calling ng-include on every template that might have a common nav scheme that is also driven by Angular.

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.