Chen_Peng Chen_Peng - 3 months ago 13
AngularJS Question

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

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

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