several element in the same ui-view angularjs

Question

I need to have 3 elements in a same view and I do not know how to do it, I have my ui-view = 'main', I can display my menu but I do not know how to display the template Of the selected menu in the same view

this is my routing

    routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider){

$stateProvider
    .state("connexion", {
        url: "/connexion",
        templateUrl: 'Template/connexion.html',
        controller: 'PostController'
    })
    .state("accueil", {
        url: "/",
        templateUrl: 'Template/connexion.html',
        controller: 'PostController'
    })
    .state('agenda', {

        url: "/agenda",
        views: {

            // for column two, we'll define a separate controller
            '': {

                templateUrl: 'Template/agenda.html',
                controller: 'customersCtrl',
                resolve:{
                    "check":function($cookies,$location){   //function to be resolved, accessFac and $location Injected

                        // console.log($cookies.get('user'));
                        if ($cookies.get('user')){    //check if the user has permission -- This happens before the page loads

                            // $cookies.remove('user');

                        }else{
                            $location.path('/');                //redirect user to home if it does not have permission.
                            alert("Vous devez vous connecter pour acceder a cette page");
                        }
                    }
                }
            },
            'main':{

                url: "/menu",
                templateUrl: 'Template/menuAddAgenda.html'

               /* //i want to put here
                ("bar", {

                    url: "/bar",
                    templateUrl: 'Template/bar.html'
                })

                ("foo", {

                url: "/bar",
                templateUrl: 'Template/foo.html'
                })
                */
            }
        }

    })

$urlRouterProvider.otherwise("/");

$locationProvider.html5Mode(true);

this is my modal code

    <div class="modal-body" id="modal-body">

<div class="row">
    <div class="span12 ui-view-container">
        <div class="well" ui-view="main"></div>
    </div>
</div>

<div ng-view></div>

and this my code menu

<div class="navbar">
<div class="navbar-inner">
    <a class="brand" href="#">Quick Start</a>
    <ul class="nav">
        <li><a ui-sref="foo">Route 1</a></li>
        <li><a ui-sref="bar">Route 2</a></li>
    </ul>
</div>

My menu displays correctly but I do not know how to set the route with my ui-sref To be displayed in the same view

if some one can help me

thans in advance

EDIT

I tried with this but it does not work with this error Error: Could not resolve 'bar"' from state 'agenda'

.state('bar', {
            url: '/bar',
            views: {
                'main@agenda': {

                    abstract :true,
                    template: '<h1>bar</h1>'


                }
            }
        })

and with this it works well in my ng-view = "main" but my first ng-view without name behind the window modal disappears

.state("bar", {

            url: "/bar",
            views: {

                'main':{
                    template: '<h1>bar</h1>'

                }

            }
        })

and when a put the parent it does not work again

      .state("bar", {

        url: "/bar",
        parent:'agenda',
        views: {

            'main':{
                template: '<h1>bar</h1>'

            }

        }
    })

RE EDIT

i read the docs and i see this

Before 1.2.0 .setNestedState was used instead of .state. In 1.2.0 setNestedState was deprecated in favour of .state,

so i make this one

i need view but does nt work

routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider,stateHelperProvider){

    stateHelperProvider
        .state({
            name: "connexion",
            url: "/connexion",
            templateUrl: 'Template/connexion.html',
            controller: 'PostController'
        })
        .state({
            name: "accueil",
            url: "/",
            templateUrl: 'Template/connexion.html',
            controller: 'PostController'
        })
        .state( {
            name:'agenda',
            url: "/agenda",
            children: [
                {
            views: {
                        // for column two, we'll define a separate controller
                        '': {

                            abstract: true,
                            templateUrl: 'Template/agenda.html',
                            controller: 'customersCtrl',
                            resolve: {
                                "check": function ($cookies, $location) {   //function to be resolved, accessFac and $location Injected

                                    // console.log($cookies.get('user'));
                                    if ($cookies.get('user')) {    //check if the user has permission -- This happens before the page loads

                                        // $cookies.remove('user');

                                    } else {
                                        $location.path('/');                //redirect user to home if it does not have permission.
                                        alert("Vous devez vous connecter pour acceder a cette page");
                                    }
                                }
                            }
                        },

                        'main': {

                            abstract: true,
                            templateUrl: 'Template/menuAddAgenda.html',
                            children:[

                                 {
                                    name:'foo',
                                    abstract: true,
                                    template: '<h1>foo</h1>'

                                },
                                {
                                    name:'bar',
                                    abstract: true,
                                    template: '<h1>bar</h1>'

                                }

                            ]
                        }

                    }
                }]
        })

    $urlRouterProvider.otherwise("/");

    $locationProvider.html5Mode(true);
})

but this one works for the view='' , but not for the view='main'

routeApp.config(function($stateProvider, $urlRouterProvider,$locationProvider,stateHelperProvider){

    stateHelperProvider
        .state({
            name: "connexion",
            url: "/connexion",
            templateUrl: 'Template/connexion.html',
            controller: 'PostController'
        })
        .state({
            name: "accueil",
            url: "/",
            templateUrl: 'Template/connexion.html',
            controller: 'PostController'
        })
        .state( {
            name:'agenda',
            url: "/agenda",
            views: {
                        // for column two, we'll define a separate controller
                        '': {

                            abstract: true,
                            templateUrl: 'Template/agenda.html',
                            controller: 'customersCtrl',
                            resolve: {
                                "check": function ($cookies, $location) {   //function to be resolved, accessFac and $location Injected

                                    // console.log($cookies.get('user'));
                                    if ($cookies.get('user')) {    //check if the user has permission -- This happens before the page loads

                                        // $cookies.remove('user');

                                    } else {
                                        $location.path('/');                //redirect user to home if it does not have permission.
                                        alert("Vous devez vous connecter pour acceder a cette page");
                                    }
                                }
                            }
                        }
                    },
            children: [
                {
                    views:{
                        'main': {

                            abstract: true,
                            templateUrl: 'Template/menuAddAgenda.html'

                        },
                        'foo': {

                            abstract: true,
                            template: '<h1>foo</h1>'

                        },
                        'bar': {

                            abstract: true,
                            template: '<h1>bar</h1>'

                        }
                    }
                }]
        })

    $urlRouterProvider.otherwise("/");

    $locationProvider.html5Mode(true);
})

i create a plunker

https://plnkr.co/edit/Zyrj3gRv1cGZpcWwhXfL?p=preview

but i have a problem with this plunker because my menu have to be in the modal (view='main') and not outside in other view=''

Akashii · Accepted Answer · 2017-04-04 23:01:32Z

1

you can try it

.state('main', {
    url: '/main',
    views: {
 foo@main :{
//
}
bar@main:{
//
}
}

the syntax of it is viewname@statename . You can see here for more infomation https://scotch.io/tutorials/angular-routing-using-ui-router

EDIT

patch in your script

https://cdnjs.com/libraries/angular-ui-router.statehelper and add Add a dependency on ui.router.stateHelper in your app module.

angular.module('yourapp', [ 'ui.router', 'ui.router.stateHelper' ])

and do like this

 .config(function(stateHelperProvider){
    stateHelperProvider.setNestedState({
      name: 'angeda',
      templateUrl: 'angeda.html',
      children: [
        {
          name: 'mail',
          templateUrl: 'mail.html',
          children: [
            {
              name: 'foo',
              templateUrl: 'foo.html'
            },{
            name: 'bar',
              templateUrl: 'bar.html'
             }
          ]


      ]
    });
  });

Here for more infomation

https://github.com/marklagendijk/ui-router.stateHelper

edited Apr 4, 2017 at 23:01

answered Apr 4, 2017 at 14:46

Akashii

2,2815 gold badges19 silver badges32 bronze badges

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

5 Comments

Gazano Over a year ago

i test but i don't uderstand why it does not work please check my edit

Gazano Over a year ago

thanks for your help but I still have problems check my edit and i create a plunker for more help

Akashii Over a year ago

@Gazano i think you should make question more clearly . What is the view you want display in the same ? What is the view disappears . I think you should create the name for more clearly , and what is error when you use stateHelperProvider ? And do you read it

// NOTE: when using child states with views you should make sure that its parent has a template containing a ui-view directive.

Gazano Over a year ago

ok So i create a plunker with 2 view first named "Principal" and second view named "Second" on this plunker , I got to put the menu in the view "Second", this one is in the modal, but when I display the modal my view Principal disappears this is the plunker plnkr.co/edit/3tc42NIi4E41NPyAFy8w?p=preview I just want my main view does not disappear. we are almost there :D

Akashii Over a year ago

sr i cant help now , but i think you can found more infomation in here , and do it by myself stackoverflow.com/questions/24745908/… and github.com/angular-ui/ui-router/wiki/Multiple-Named-Views really sr

Collectives™ on Stack Overflow

several element in the same ui-view angularjs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related