Why do I get a duplication of div while using ui-router?

Question

I wrote a simple demo to try to understand ui router.

But the problem is, I got a duplicate view while using ui router.

Here's the stateProvider part

app.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/baseView');

    $stateProvider
        .state('baseView',{
            url:"/baseView",
            templateUrl:"baseView.html"
        })

        .state('baseView.empty',{
            abstract: true,
            views:{
                "navBar":{
                    templateUrl:"sideBar.html",
                    controller: "sideCtrl"
                },
                "123":{
                  templateUrl:"content.html"
        }
            }
        })

        .state('baseView.empty.content1',{
            url:'/content1',

            templateUrl:"content1.html"
        })

        .state('baseView.empty.content2',{
            url:'/content2',
            templateUrl:"content2.html"
        })
})

plunker:http://plnkr.co/edit/Rm0Q50GX2GYvqyKnzkKz?p=preview

You will see the problem as soon as you see the preview in plunker.

I believe the problem is in the state provider part because if I remove the state provider completely, there's no duplicate...

Answer 1

The problem isn't related to state definitions. The reason is you loaded angular.js & ui-router.js twice, which instantiating same thing twice. You could remove one of the reference would make it working properly.

Forked Plunkr