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.

Community
  • 1
  • 1
Sam
  • 13,934
  • 26
  • 108
  • 194
  • 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. – Ketan Apr 26 '13 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 ? – Sam Apr 26 '13 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. – Ketan Apr 26 '13 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 – Sam Apr 27 '13 at 07: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 – Sam Apr 27 '13 at 15:30

1 Answers1

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 !

Sam
  • 13,934
  • 26
  • 108
  • 194
  • 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. – thinice Jun 14 '13 at 16:58