I’ve done it both ways and I think they are both valid ways of doing it.
The easiest, is obviously just loading everything and showing/hiding tabs
based on which one got clicked. If you are using ZURB, the common thing to
do is to use their markup, but write the actual behavior in angular. This
can be as simple as a few ng-clicks and ng-show’s or better yet, can be
easily encapsulated in a set of re-usable directives like how angular-ui
bootstrap does for bootstrap.
If you want to lazy-load each tab, then you can take advantage of ui-router
to do so. Typically you would set up all the tabs titles but have just one
content area wit a ui-view directives. Each tab usually has an anchor with
a link to the route/state for that tab’s content. Angular ui-router takes
care of loading the content for you, then all you have to do is make sure
the appropriate class gets added to the tab by using something like
ng-class. For example:
ng-class="{ active: $state.includes('tab1') }
Again, it’s probably best to encapsulate this logic in a set of directives
to make it easier to re-use.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
