CODEWITHSUNDEEP
angularjsangular-ui-router
d_a_g_a_h_e
d_a_g_a_h_e

Reputation: 61

Confused in how to implement tab based app with angular ui-router (like gmail)

I was thinking last night about how to port our crud application to a tab based app, like gmail. First, reading a lot about ui-router, i thought in create a tabService that will create a new tab for each state change (listen $rootScope.stateChangeSuccess), the new tab would include the corresponding view (ui-view="bancos") that will display the state template.

My first test and my first problem, when shown the list of items, a click over one of the item (itemId=4 for example) should open a new tab and display the item with id=4 in this tab, inside the corresponding (ui-view="bancos/4"). Note how i'm trying to map named ui-view with states to display the state defined templates in the corresponding ui-view.

I know that ui-router sample seems to do what i'm trying, but they are using nested states with unamed ui-view inside parent state template. In my case, the parent state ui-view element and his child state ui-view element should be sibling.

Considering the nature of angular, tree structured, and the nature of ui-router states, tree structured too, can i use ui-router to implement my requirements (crud application with tab based design).

Regards Danny

Upvotes: 5

Views: 6081

Answers (2)

Alfonso
Alfonso

Reputation: 147

Here is me example, if you have questions i can answer

http://plnkr.co/edit/tqfPVFaesSe9Q6ZkPMzE?p=preview

Short explain: don't use tabs instead of that create a fake, works well and you save a lot of work.

Best

Upvotes: 2

Busata
Busata

Reputation: 1118

I was looking for the same info, does the following example help you?http://plnkr.co/edit/gMsKK9l7J0B8vZIMIVfD?p=preview (Not my coding.)

Edit:

I've found more useful data.

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

In my code, I have set it up like this:

        .state('surveys.list', {
            url: '/list',
            templateUrl: "survey/surveys_overview.tpl.html",
            controller: 'SurveyOverview'
        })
        .state('surveys.create', {
            abstract: true,
            templateUrl: "survey/survey.create.tpl.html",
            controller: 'SurveyManageController'
        })
        .state('surveys.create.views', {
            url: '/create',
            views: {
                'details': {
                    templateUrl: "survey/survey.create.details.tpl.html"
                },
                'steps': {
                    templateUrl: "survey/survey.create.steps.tpl.html"
                }
            }
        });

The surveys.create.tpl.html just has a and two tabs with each one div:

<div ui-view="details"> & <div ui-view="steps">

Upvotes: 0

Related Questions