AngularJS > ui.router using a promise ONLY when data is ready.

Question

I have followed the guidelines on angular-ui/ui-router wiki, to only load my images and text when the data is ready.

I don't get any errors, but it doesn't seem to be working. I'm new to Angular JS, so please excuse my lack to expertise.

My Plnkr: http://plnkr.co/edit/4jZuBwm8TI42U6ZvWIPJ?p=preview

The code below is slightly different from my Plnkr (due to providing a working demo).

index.js

    var app = angular.module('myApp', ['ngAnimate', 'ngCookies', 'ui.router'])
      .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state('home', {
            url: '/',
            templateUrl: 'app/main/main.html',
            controller: 'MainCtrl'
          })
          .state('about', {
            url: '/about',
            templateUrl: 'app/about/about.html',
            controller: 'AboutCtrl'
          })
          .state('work', {
            resolve: {
              customPromise: function($q, $timeout) {
                var deferred = $q.defer();
                $timeout(function() {
                  deferred.resolve('all assets have loaded!');
                }, 1000);
                return deferred.promise;
              }
            },
            abstract: true,
            template: '<div ui-view="portfolio" class="page-work" autoscroll="true" data-loading="{{1}}"></div>'
          })
          .state('work.details', {
            url: '/work/:workId',
            views: {
              'portfolio@work': {
                templateUrl: 'app/work/work.html',
                controller: 'WorkCtrl'
              }
            }
          });

        $urlRouterProvider.otherwise('/');

      });

work.controller.js

    'use strict';

    var app = angular.module('myApp');

    app.controller('WorkCtrl', ['$scope', '$stateParams', '$http', '$location', function($scope, $stateParams, $http, $location, customPromise) {

        $scope.customPromise = customPromise;

        if (!$stateParams.workId) {
            $location.path('/');
        }

        $http.get('projects/' + $stateParams.workId + '.json').success(function(data) {
            $scope.work = data;
            $scope.pageClass = 'page-work'; // only use to add class for ui view

            //function for next previous

            var currentWorkIndex;
            var l = $scope.allWorks.length;
            for (var i = 0; i < l; i++) {
                if ($scope.allWorks[i].id === $stateParams.workId) {
                    currentWorkIndex = i;
                    break;
                }
            }
            var prevWorkIndex = (currentWorkIndex !== 0) ? (currentWorkIndex - 1) : (l - 1);
            var nextWorkIndex = (currentWorkIndex !== l - 1) ? (currentWorkIndex + 1) : (0);
            $scope.prevWork = $scope.allWorks[prevWorkIndex].id;
            $scope.nextWork = $scope.allWorks[nextWorkIndex].id;


        });

    }]);

Any help is most appreciated. Thanks!

You need to put the actual requests inside the resolve. http://stackoverflow.com/questions/22209107/angularjs-ui-router-preload-http-data-before-app-loads — tpie, Apr 18 '15 at 15:22
Thanks for your answer tpie. I thought that by using `customPromise : function` I was inferring the scope in my work.controller (customPromise). I'm not sure of exactly what I have to do. I looked through the ui.router wiki, and still don't get where I have to go. Should I wrap my entire `customPromise` in the controller around the code where I use my `$http` request? — cheers_to_you, Apr 19 '15 at 02:20
check my answer...mind you I just fixed your plunker. I didn't use an ajax call, but you can do that on your end. — tpie, Apr 19 '15 at 03:45

score 1 · Accepted Answer · answered Apr 19 '15 at 03:44

1

Plunker

You have to inject the result of the resolve using the controller of the state. Then you can use that binding in your view like you normally would.

You need this in your state

controller: function($scope, customPromise) {
        $scope.message = customPromise;
      }

Now, in your HTML you can bind {{message}}.

Resolve Documentation

Study the example there if you are not clear. Note that there is a necessary correlation between what happens in resolve and injecting it into the controller of the state further down.

answered Apr 19 '15 at 03:44

tpie

6,021
3
22
41

Thanks again tpie, I think I have now grasped what I have to do. One last thing, is it possible to call the entire work div `{{work}}` or do I have called each `{{work.item}}` in which case I would `$scope.eachItem = customPromise;` which would result in a long list of items to scope. Sorry for my lack of understanding, its my first ever use of Resolve/Promise combo. – cheers_to_you Apr 19 '15 at 08:11
when you say the 'entire work div', what do you mean? – tpie Apr 19 '15 at 08:15
the entire contents of work.html `
` to the closing `
`. – cheers_to_you Apr 19 '15 at 08:27
go to chat - https://chat.stackoverflow.com/rooms/75626/ui-router-using-a-promise – tpie Apr 19 '15 at 08:37

AngularJS > ui.router using a promise ONLY when data is ready.

1 Answers1