CODEWITHSUNDEEP
angularjsangular-ui-router
Weedoze
Weedoze

Reputation: 13943

Angular ui router - fixed menu with dynamic content

I have to create a page with a fixed top menu containing some input and buttons.

Depending on which data is filled in and which button is pressed, a map with data should appears below the menu.

The menu will always be there and only the map will be updated.

ROUTE

$stateProvider
.state('login', {
    url : '/login',
    templateUrl : 'app/login/login.html',
    controller : 'LoginController'
})
.state('home', {
    url : '/home',
    templateUrl : 'app/home/home.html'
})
.state('menu', {
    url : '',
    templateUrl : 'app/menu/menu.html',
    parent : 'home'
});

home.html

<div ui-view="menu"></div>

<h1 class="ui huge header">
    Please select something
</h1>

For the moment I can only see the "Please select something" but not the menu.

After that, how can I replace "Please select something" by the needed map ? Is it possible to have a default view ? When landing on home I should see the message and not a map

EDIT Here is what I got after the answers

ROUTE

$stateProvider
.state('login', {
    url : '/login',
    views : {
        'login' : {
            templateUrl : 'app/login/login.html',
            controller : 'LoginController'
        }
    }
})
.state('home', {
    url : '/home',
    views : {
        'menu' : {
            templateUrl : 'app/menu/menu.html'
        },
        'content' : {
            templateUrl : 'app/home/home.html',
        }
    }
})
.state('home.other', {
    url : '/other',
    views : {
        'content@' : {
            templateUrl : 'app/home/home.html'
        }
    }
});

INDEX.HTML

<div ui-view="login"></div>

<div ui-view="menu"></div>
<div ui-view="content"></div>

It is working well but it is the best way to do it ? I have a lot of different content so I will have to duplicate the menu view inside every state ?

If I have a page with a different layout (without menu and content) - Should I just add a new <div ui-view="list"></div> in index.html ?

Upvotes: 0

Views: 610

Answers (2)

Kunso Solutions
Kunso Solutions

Reputation: 7630

EDITED according to question update

Try to read Nested views this article to better understand existing solution in ui-router.

Here is example what you can do to avoid duplication of routes:

$stateProvider
.state('login', {
    url: '/login',
    views: {
        'login': {
            templateUrl: 'app/login/login.html',
            controller: 'LoginController'
        }
    }
})
.state('menu', {
    url: '/menu',
    templateUrl: 'app/menu/menu.html'
})
.state('menu.content', {
    views: {
        'default': {
            url: '/default',
            template: '<h1>Please select something</h1>'
        },
        'content1': {
            url: '/content1',
            templateUrl: 'app/content1/content1.html'
        },
        'content2': {
            url: '/content2',
            templateUrl: 'app/content2/content2.html'
        }
    }
});

As you can see very clear to read and understand from url what is inside and why. If you will have url menu/content1 - that's mean under your menu is content1 visible right now.

Upvotes: 1

Mohit Yadav
Mohit Yadav

Reputation: 156

You don't have to define another state for the the menu just add it to your home state as another view. Like this

.state('home', {

    url: '/home',
    views:{

        'menu': {
            templateUrl: 'app/menu/menu.html'
        },

        'home': {
            templateUrl: 'app/home/home.html'
        }

    }
})

And change your HTML to this: 

<div ui-view="menu"></div>
<div ui-view="home"></div>

And whenever you want to update the view (keeping the menu the same), create a state for that view like this:

.state('home.newState', {

    url: '/newState',
    views:{
        'home@':{
            templateUrl: 'app/home/newState.html'
        }
    }

})

This will update the view by adding the newState.html template in place of home.html template keeping the menu same.

Upvotes: 1

Related Questions