I created a basic demonstration to get familiar with ui router.
Unfortunately, I encountered an issue of duplicated views when utilizing ui router.
Below is the snippet of the stateProvider section:
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"
})
})
Here's the plunker link for reference: http://plnkr.co/edit/Rm0Q50GX2GYvqyKnzkKz?p=preview
The duplication issue becomes evident in the plunker preview.
Upon inspection, it appears that the problem lies within the state provider segment as removing it eliminates the duplicate view...