AngularJS: What is a modular approach to sidebars and sub-pages? - angularjs

Question

I'm building an app for fun and practice, and within the app there is a dashboard module. That dashboard module houses other modules. I do this because the dashboard is the parent state for the modules inside of it and I didn't think it would be right to put them in the outside folder with all the other irrelevent modules, because they belong to the dashboard. For example:
/login
/signup
/logout
/profile
/dashboard
/home
/settings
/foo
/bar
...and their states would be dashboard.home with a url of /dashboard/home, and so forth.
In the settings folder, I have a current set up that works, but I don't know if it's considered good practice.
Under the settings directory, I have some partials and controllers. For example:
/login
/signup
/logout
/profile
/dashboard
/home
/settings
/controllers
settingsAccount.controller.js
settingsPassword.controller.js
settingsPersonal.controller.js
/partials
_account.html
_password.html
_personal.html
settings.html
settings.module.js
/foo
/bar
And those partials would be navigated through on the settings.html. How I currently do this is like this..
settings.html:
<div class="row" ng-controller="LeftSidebarController as sidebar">
<div class="col-sm-3">
<div class="page-title">
<h1 view-title>Settings</h1>
</div>
<ul class="list-group">
<li class="list-group-item" ng-class="{'active': sidebar.currentTab(1)}" ng-click="sidebar.setTab(1)">
<a href>Account</a> <i class="fa fa-chevron-right list-group-item__arrow-right"></i>
</li>
<li class="list-group-item" ng-class="{'active': sidebar.currentTab(2)}" ng-click="sidebar.setTab(2)">
<a href>Password</a> <i class="fa fa-chevron-right list-group-item__arrow-right"></i>
</li>
<li class="list-group-item" ng-class="{'active': sidebar.currentTab(3)}" ng-click="sidebar.setTab(3)">
<a href>Personal</a> <i class="fa fa-chevron-right list-group-item__arrow-right"></i>
</li>
</ul>
</div>
<div class="col-sm-7">
<div class="widget-container widget-container--settings fluid-height">
<div ng-if="sidebar.currentTab(1)"
ng-include src="'app/dashboard/settings/partials/_account.html'"
ng-controller="SettingsAccountController as account"></div>
<div ng-if="sidebar.currentTab(2)"
ng-include src="'app/dashboard/settings/partials/_password.html'"
ng-controller="SettingsPasswordController as password"></div>
<div ng-if="sidebar.currentTab(3)"
ng-include src="'app/dashboard/settings/partials/_personal.html'"
ng-controller="SettingsPersonalController as personal"></div>
</div>
</div>
</div>
...and I have a global controller LeftSidebarController, which looks like this:
(function() {
'use strict';
angular
.module('app.controllers')
.controller('LeftSidebarController', LeftSidebarController);
function LeftSidebarController() {
var vm = this;
vm.tab = 1;
vm.setTab = function(tabId) {
vm.tab = tabId;
};
vm.currentTab = function(tabId) {
return vm.tab === tabId;
};
}
})();
So as you can see, I basically just load one of the partials and attach it's controller to it based on which tab is clicked in the sidebar.
Has anyone ever had to do something like this and know a better approach? I'd really appreciate some good guidance, I don't want to make it like this because it seems really messy to me.
I thought having the sub-sub-modules, with a state of something like dashboard.settings.account, with url of /dashboard/settings/account. If I can't find a better approach I'll probably go that route, seems a bit better to me because then everything has it's own state and I will no longer be including multiple files and controllers in a single state. Only problem is I don't know how I'd handle the sidebar yet.
Thanks!

Answer 1

When I build an app using ui-router, I usually structure it this way:
/app
/components
/states
/login
/signup
/logout
/profile
/dashboard
states.module.js
index.html
app.module.js
app.config.js
The components folder is where I put all of my custom directives, services, filters, etc. organized by feature. For example, I might have a notifications sub-folder that contains a service and a directive.
My states folder has a file called states.module.js that would look something like this:
angular.module('app.states', [
'app.states.login',
'app.states.signup',
'app.states.logout',
// etc.
]);
Then each state sub-folder would have a module and all of the files associated with that state. It would also have a {state}.config.js file that adds the state to $stateProvider.
All of that is similar to what you have done (though I wouldn't put controllers and templates in separate folders). The key difference is, in the case of your dashboard state, I would use views.
dashboard.config.js
angular.module('app.states.dashboard')
.config(stateConfig)
;
function stateConfig($stateProvider) {
$stateProvider
.state('dashboard', {
url: '/dashboard/:view',
views: {
'home#dashboard': {
controller : 'DashboardHomeViewController',
controllerAs: 'home',
templateUrl : 'states/dashboard/home.html'
},
'settings#dashboard': {
controller : 'DashboardSettingsViewController',
controllerAs: 'settings',
templateUrl : 'states/dashboard/settings.html'
},
'': {
controller : 'DashboardViewController',
controllerAs: 'dashboard',
templateUrl : 'states/dashboard/dashboard.html'
},
}
)
;
}
I would have files in that folder for each view controller and template, as well as a module file. The main view template file would look something like this:
dashboard.html
<ui-view name="{{dashboard.view}}#dashboard"></ui-view>
Hopefully that answers your question.