eabates eabates - 5 months ago 20
AngularJS Question

Service's data into nested view on load with ui-router

On the homepage of an Angular app, I have a view and a nested view (see ui-router code below). For the view, I make an

call to my database and display results using
. Simultaneously I push those results to a service. In the nested view, I call a single result from the service and display it (I am using two controllers). My problem is that I need all of this to happen on load. Is a "resolve" in ui-router the best way to approach this?

$urlRouterProvider.when('/open', '/open/mainbook');
.state('open', {
url: '/open',
templateUrl: 'ang/views/open.html',

.state('open.mainbook', {
url: '/{featId}',
templateUrl: 'ang/views/open.mainBook.html',


The solution was to not use the service, to combine the two controllers into one, and to call the nested view right away from within the initial $http call using $state.go (I also give the nested view data within the same call), i.e.
$scope.featCall = function () { $http({ method: 'GET', cache: 'true', url: '/featList' }).then(function (result) { $scope.single = []; $scope.single = result.data[0]; $state.go('open.mainbook', { featId: $scope.single.id }); bookData.clearProduct(); angular.forEach(result.data, function (eachOne) { $scope.featList.push(eachOne); bookData.addProduct(eachOne); }) }) };

Note that I still use the service (bookData) for later changes to the nested view, just not for the initial population of its data.