My application consists of 3 views (A, B, C) and 2 states (1, 2).
Here is the basic HTML structure:
<div ui-view="A"></div>
<div ui-view="B"></div>
<div ui-view="C"></div>
The two states are named list and create. In both states, the template and controller for views A and B remain the same, while view C should change its templates and controllers. However, when I manage to change the content of view C, it also refreshes views A and B causing their controllers to run again.
I am looking for the correct way to organize the router to prevent this issue.
Here is my current JavaScript code:
$urlRouterProvider.otherwise("/basestate/list");
$stateProvider
.state('baseState', {
url:"/basestate",
templateUrl: "basestate.html",
controller: 'BaseStateCtrl'
})
.state('baseState.list', {
url: "/list",
views: {
"viewA@baseState": {
templateUrl: "viewA.html",
controller: "ViewACtrl"
},
"viewB@baseState": {
templateUrl: "viewB.html",
controller: "ViewBCtrl"
},
"viewC@baseState": {
templateUrl: "list.html",
controller: "listCtrl"
}
}
})
.state('baseState.create', {
url: "/create",
views: {
"viewA@baseState": {
templateUrl: "viewA.html",
controller: "ViewACtrl"
},
"viewB@baseState": {
templateUrl: "viewB.html",
controller: "ViewBCtrl"
},
"viewC@baseState": {
templateUrl: "create.html",
controller: "createCtrl"
}
}
});