How to simplify nested state w50> -ui-router with many combinations of sub-states?
Here is a mockup of my application:
The "left pane" is for directories and the "main content" is for files. The files are listed from the selected directory ([list mode]).
The "left panel" must be reused for other purposes:
- display a form for creating a new catalog ([create mode])
- display the form for editing the selected directory ([edit mode])
Likewise, the main content can also be in [list mode], [edit mode] and [create mode]. So there would be a total of 3 x 3 possible combinations.
Using ng-switch this model can be easily modeled.
<div class="left-bar">
<div ng-switch on="directory.mode">
<div ng-switch-when="list"></div>
<div ng-switch-when="create"></div>
<div ng-switch-when="edit"></div>
</div>
</div>
<div class="main-content">
<div ng-switch on="files.mode">
<div ng-switch-when="list"></div>
<div ng-switch-when="create"></div>
<div ng-switch-when="edit"></div>
</div>
</div>
However, I would like to simulate this with an angular-ui router. I'm new to angular-ui and the state model I could think of looks something like this:
.state('main.folder-list.file-list', views: {'left-sidebar':{templateUrl:'directory-list.html'}, 'main-content':{templateUrl:'file-list.html'}})
.state('main.folder-list.file-edit', ...)
.state('main.folder-list.file-create', ...)
.state('main.folder-edit.file-list', ...)
.state('main.folder-edit.file-edit', ...)
.state('main.folder-edit.file-create', ...)
.state('main.folder-create.file-list', ...)
.state('main.folder-create.file-edit', ...)
.state('main.folder-create.file-create', ...)
One important requirement is that when you switch the "left sidebar" mode, the content of the "main content" should not change (it should still be in the same mode as before) and vice versa.
How to simplify this?
source to share
Think first, remember that you are angular-ui router
capable of handling nested state. I usually use .state('root')
, .state('root.app')
, .state('root.app.specific')
etc. With these characteristics, angular-ui router
we can simply set $scope
in the state root
as $scope.data = { status: 'ok' }
in the root child, we can still call it $scope.data
.
Also, if your create
, list
, edit
- a general "class" or a singleton. You can also keep it simple by using angular controller inheritance
in your controller type $controller('[parent-controller]', {$scope: $scope});
. This way, your method parent-controller
$scope
that they have, etc., can be called inside yours new controller
$scope
. angular-ui router
The nested state is like this. For example:
Application.controller('AppCtrl', ['$scope', '$controller', function($scope, $controller) {
$controller('AdminCtrl', {$scope: $scope});
}]);
In this example, my AppCtrl
will have AdminCtrl
$scope
.
source to share