Hi. I am totally noob with Angular and designing pretty much complicated application.
My intention is to have tabular app with following features: 0. Tabs are in principle of 2 types: list and details. The human being workflow is asynchronous with necessity to switch back and forth. 1. They have pretty complicated state (inputs, data grids, sort options, scroll positions, edit forms, view modes, etc). The states are intended to be saved with DOM without saving/restoring in any way. 2. They are created dynamically. Creating is coming either at bootstrap time or at adventure time within some other tabs. 3. They should (probably) be referencable from within each other. For the purposes of "open or create details for foo # N" and "when closed, go back to opened tab or fall back to list tab" Nav history is not the matter, but would be great as well. 4. Their internal state is not intended to be referencable. But it may come up in future. My considerations so far: 1. Implementation should use bootstrap-style (with show/hide content) rather then ui/ng-route (with destroying/redrawing view content). 2. A service should handle all tabs management. 3. The ui-router should be used to make references like #/foo/:fooId (maybe ngRoute could also help, i rather don't need any routabe states beside "active tab", but it seems like ngRoute tends to reload all the page on a tab switch - i dunno if it's as designed or my misunderstanding) 4. Available tabs should be provided in separate pluggable modules. The closest sample I found in the mailgroup: http://plnkr.co/edit/bhtMin1B1dwwqYvyrpVl It uses (1) bootstrap tabs with ng-repeat, and (2) service to maintain and add/delete tabs. But it hardcodes opening tabs in controllers. And it does not use routing, instead it does ng-click="openFoo('<foo-directive></foo-directive>')" With (3) ui-router I came up with such stuff: http://plnkr.co/edit/Ns344fo9u4C1nbQ77Jd8 It uses empty template and just ignores ui-view. Looks very hacky and I'm not sure it is very angularish. Here I'm not sure when exactly attached controller will be called/created? Is it only at state name change, or also at stateparams change? Also, there is a situation: 1. > user calls to create new Foo 2. < opening a tab with edit form or whatever for instance, the state is 'fooCreating' with url '#/foo/+' 3. > enters some data and saves object 4. < saving of data, getting new id on server, reloading object data, showing it in dedicated tab for user to gaze state should change to 'fooDetails' with url '#/foo/fooId' but the tab should probably remain the same, switching only internal state and maybe header. How to achieve such transition without changing view? And now I'm confused with (3) pluggable directives instead of hardcoding tab types. A module should provide: Widgets for FooBrowse and FooDetails tab These widgets should be aware of TabService to register something like 'foo/list' and 'foo/details' with it. Modules should be aware of service in the main app. And the main app shoudl be aware of stuff modules. Maybe it is possible for service to take something in loaded module, and call it, injecting itself ? Then the service need to add new state urls like '#/foo/' -> FooBrowse, #/foo/Id -> FooDetails. Is it possible to manipulate routes after config stage long passed? Thanks for reading so far :) Any comments will be appreciated. -- 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/d/optout.
