CODEWITHSUNDEEP
javascriptangularjs
Les Paul
Les Paul

Reputation: 1278

Angular - Service returns value, but doesn't route in app.config

I want to make a call to a service to retrieve a user from a database (currently mock data, but it will be from a database) and have that user's information sent to ProfileController when the "profile" state is activated. The call is made to the service, but nothing happens after that: no action is made in the then() or catch() portion of the function. Any ideas on what I should do?

(function() {
  "use strict";

  angular.module("testing_app", [
    "ui.router"
  ])
  .config(function($urlRouterProvider, $locationProvider, $stateProvider, $qProvider) {
    $locationProvider.html5Mode(true);

    $stateProvider
        .state("users", {
            url: "/users",
            templateUrl: "templates/users.html",
            controller: "UsersController as uc"
        })
      .state("profile", {
        url: "/user/:id",
        templateUrl: "templates/profile.html",
        controller: "ProfileController as pc",
        resolve: {
          resolvedUser: ["UsersService", "$q", "$stateParams", function(UsersService, $q, $stateParams){
            console.log($stateParams.id);
            return UsersService.findById($stateParams.id).then(function(user){
              return user;
            }).catch(function(error){
              return $q.reject(error);
            });
          }]
        }
      });
  });
})();

UsersService.js is currently using mock data, but it will eventually get data from a database.

(function(){
    "use strict";

    angular.module("testing_app")
        .factory("UsersService", function(){

            var Users = {};

            var userList = [
                { id: 1, name: "Richard Hendricks", email: "[email protected]", phone: 4085550011, pokemon: { isPresent: true, name: "eevee"}, icon: { isPresent: false, name: null} },
                { id: 2, name: "Erlich Bachman", email: "[email protected]", phone: 4155552233, pokemon: { isPresent: true, name: "celebi"}, icon: { isPresent: false, name: null} },
                { id: 3, name: "Gavin Belson", email: "[email protected]", phone: 9165554455, pokemon: { isPresent: true, name: "snorlax"}, icon: { isPresent: false, name: null} }
            ];

            Users.all = function(){
                return userList;
            };

            Users.findById = function(id){
                return userList.find(function(user){
                    return user.id == id;
                });
            };

            return Users;
        });
})();

Upvotes: 0

Views: 40

Answers (1)

Pengyy
Pengyy

Reputation: 38171

For you don't use promise in your service, there won't be any Promise.then() or Promise.catch() in your UserService.findById().

you should use promise in your service.

Users.findById = function(id){
    let deferred = this.$q.defer();    // you have to inject $q in your factory

    deferred.resolve(userList.find(function(user) {
        return user.id == id;
    }));

    return deferred.promise.
};

Upvotes: 2

Related Questions