Navbar is duplicated automatically while using UI Router

Question

I need to have navbar with links for two sub-views: index.file and index.stats but when one of them clicked the new navbar appears inside. How to fix it?

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state('index', {
            url: '',
            templateUrl: "../../index.html",
            controller: "Controller"
    })
        .state('index.file', {
            templateUrl: "../js/views/file.html"
    })
        .state('index.stats', {
            templateUrl: "../js/views/stats.html"
    })
});

index.html

<div class="container">
    <nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li class="active"><a ui-sref="index.file">File</a></li>
            <li class="active"><a ui-sref="index.stats">Stats</a></li>
        </ul>
    </nav>


    <div ui-view></div>

</div>

enter image description here

You probably put navbar in templates as well as outside of ng-view? — charlietfl
– charlietfl, Commented Jan 25, 2015 at 14:02
I don't have navbar in templates. It exists only in index.html — J.Olufsen
– J.Olufsen, Commented Jan 25, 2015 at 14:06

Rk R Bairi · Accepted Answer · 2015-12-07 05:09:49Z

I know your problem is solved, But this may help others.

Generally the duplication in routes occurs when you try to land into the same base html where you include other html pages.

E.g : If my index.html has something like this
     <div ng-include="navbar.html"></div>
     <div ui-view></div>

    In the navbar.html, you try to do the following
    <a ui-sref="index">index</a>
    $stateprovider.state='index',{
    url:'/index', template: 'index.html'});

    Then the index.html would be rendered with a duplicate view with a self reference of itself. To solve the problem, avoid including the same template. (Its better to always have home.html/landing.html saperated from index.html)

Collectives™ on Stack Overflow

Navbar is duplicated automatically while using UI Router

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related