AngularJS and UI-Router simplify states - angularjs

Question

I am fairly new to Angular (only been using it a couple of months) and although I have learnt so much since I read my first book, there are a few concepts or best practices that elude me.
This might be one of them. I have a project at the moment which has a set of states, basically it has
collections - which it lists, in this case I have made it a stand alone state, but it requires a centerId parameter (because collections belong to a center).
Create collection - Because this requires the same centerId, this "could" be a child state of collections, but I have found that in doing so, whenever a collection is created I have to update the parent's collections. So I have not made this a child of the collections state, instead it has it's own centerId parameter which I pass.
Edit collection - Again this is the same as Create collection, this state uses the same controller and indeed the same template as create collection.
Deliver - Deliver collection is a state that allows a user to update a collection with a set of specific information (POD, signature, etc) so this has it's own state and template
Collect - Collect is the same as deliver except instead of a POD, it has a POC (Proof of collection), so this uses the same controller and template as deliver
Import - Import is used to import a list of collections via csv.
Now, all these states have one thing in common, they all require the centerId. Like I have previously said, I could make them all children of the collections state, but there is a complication when updating the collections list on the parent state. It is grouped, so the resolved collection actually goes through some code before being presented to the view.
Here is my current state layout:
// Now set up the states
$stateProvider.state('collections', {
url: '/collections/:centerId',
templateUrl: '/assets/tpl/collections/index.html',
controller: 'CollectionsController',
controllerAs: 'controller',
resolve: {
// Resolve our collections before the state loads
collections: ['$stateParams', 'CollectionsService', function ($stateParams, service) {
// Get our center id
var centerId = $stateParams.centerId;
// Return our collections
return service.get(centerId);
}]
},
data: {
requireLogin: true,
pageTitle: 'Collections'
}
}).state('savingCollections', {
url: '',
abstract: true,
resolve: {
// Resolve our statuses
statuses: ['Api', function (api) {
// Return our statuses
return api.get('/api/statuses');
}]
}
}).state('savingCollections.import', {
url: '/collections/:centerId/import',
views: {
'#': {
templateUrl: '/assets/tpl/collections/import.html',
controller: 'ImportCollectionsController',
controllerAs: 'controller',
}
},
data: {
requireLogin: true,
pageTitle: 'Import your collections'
}
}).state('savingCollections.create', {
url: '/collections/:centerId/create',
views: {
'#': {
templateUrl: '/assets/tpl/collections/save.html',
controller: 'SaveCollectionController',
controllerAs: 'controller'
}
},
resolve: {
// Creates a blank collection so that the injection works
collection: function () {
// Return an empty object
return {};
}
},
data: {
requireLogin: true,
pageTitle: 'Create your collection'
}
}).state('savingCollections.edit', {
url: '/collections/:centerId/edit/:id',
views: {
'#': {
templateUrl: '/assets/tpl/collections/save.html',
controller: 'SaveCollectionController',
controllerAs: 'controller'
}
},
resolve: {
// Gets a collection from the API
collection: ['$stateParams', '$q', 'CollectionsService', function ($stateParams, $q, service) {
// Get our ids
var id = $stateParams.id,
centerId = $stateParams.centerId;
// return our collection
return service.get(centerId, id);
}]
},
data: {
requireLogin: true,
pageTitle: 'Update your collection'
}
}).state('savingCollections.receiveCollections', {
url: '',
abstract: true,
params: {
selected: null
},
resolve: {
selected: ['$stateParams', function ($stateParams) {
// Get our selected items
var selected = $stateParams.selected;
// If we have something in our parameters
if (selected) {
// Save them into our session
sessionStorage.selected = angular.toJson(selected);
}
// Return our selected items
return angular.fromJson(sessionStorage.selected);
}]
},
}).state('savingCollections.receiveCollections.collect', {
url: '/collections/:centerId/collect',
views: {
'#': {
templateUrl: '/assets/tpl/collections/receive.html',
controller: 'CollectCollectionsController',
controllerAs: 'controller'
}
},
params: {
collecting: true
},
data: {
requireLogin: true,
pageTitle: 'Collect'
}
}).state('savingCollections.receiveCollections.deliver', {
url: '/collections/:centerId/deliver',
controller: 'CollectCollectionsController',
controllerAs: 'controller',
views: {
'#': {
templateUrl: '/assets/tpl/collections/receive.html',
controller: 'CollectCollectionsController',
controllerAs: 'controller'
}
},
data: {
requireLogin: true,
pageTitle: 'Deliver'
}
});
I hope this is enough information.
If you are unsure what I am trying to do, basically I want to make my states easy to read and understand. I would like it so that if someone looks at the states, they will know exactly what is going on.
Also, I would like to refrain from ugly ui-srefs such as this:
ui-sref="savingCollections.receiveCollections.deliver({ centerId: controller.centerId, selected: [collection]})"
any help would be greatly appreciated.

Answer 1

Your state declarations aren't bad. I find them fairly readable. One bit of advice I have to make things more readable is to to move the resolve functions out of the state declarations to another place and simply reference them by name. You can put them below your state code or you can place them in a different service entirely.
I put mine in a different service, like so:
var resolveFunctions = {
resolveData: function($q, $stateParams, dataService) {
//getData returns a promise
return dataService.getData($stateParams.id);
}
}
angular.module("myModule").constant("resolveFunctions", resolveFunctions);
This resolve function retrieves some data based on an ID in the state parameters.
Then I can use the resolveFunctions service in the place I declare my states:
//Inject resolveFunctions service as a dependency wherever you are defining your states
resolve: {
data: resolveFunctions.resolveData
}
I hope that makes sense.
As for switching between states, I use state parameters to pass data between states. The resolve functions for the new state can then read from the state parameters like in the resolveFunctions example above.
You can use $state.go() in your controller to switch between states with state parameters (you can add an ng-click handler with a $state.go call).
The following code goes to the "savingCollections" state and passes a center ID as a state parameter. Your can either extract the centerId in the controller or in one of the resolve functions using $stateParams.centerId
$state.go("savingCollections", { centerId: centerId });
I haven't done so personally, but I think you can also do that in ui-sref as well.
ui-sref="savingCollections({ centerId: controller.centerId })"
If that ui-sref works, that would be easier than calling $state.go()