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. stackoverflow.com/questions/22209107/… — tpie
– tpie, Commented Apr 18, 2015 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
– cheers_to_you, Commented Apr 19, 2015 at 2: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
– tpie, Commented Apr 19, 2015 at 3:45

tpie · Accepted Answer · 2015-04-19 03:44:50Z

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, 2015 at 3:44

tpie

6,2393 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cheers_to_you Over a year ago

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.

tpie Over a year ago

when you say the 'entire work div', what do you mean?

cheers_to_you Over a year ago

the entire contents of work.html <div class="work {{work.class}}" data-loading="{{1}}" ui-view="portfolio"> to the closing </div>.

tpie Over a year ago

go to chat - chat.stackoverflow.com/rooms/75626/ui-router-using-a-promise

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related