Need help on Angular Factory

Question

Hi SO angular community !

I'm very confused, I think I have understand the factory purpose and concept, but seems not ...

Here is my problem (surely simple for you) :

I want to use my REST API (working perfectly) using Angular and .factory ...

rest.js

var app = angular.module('urlShortener', ['ngRoute', 'ngResource']);

app.factory('API', ['$resource',
  function($resource){
    return $resource('/link'});
  }],{
    get: {method:GET},
        post: {method:POST},
        put: {method:PUT},
        delete: {method:DELETE},
    }
);

app.controller('GetAll', function ($scope) {
        $scope.links = API.get();
});

index.ejs

<div ng-controller="GetAll">
    <ul>
        <li ng-repeat="link in links">
          <p>{{link.itemId}} --> {{link.url}}</p>
        </li>
      </ul>
  </div>

Not working ... 2 hours I'm consulting the Angular API, and no solutions :/

Please help me I'm wasting time :'(

\\\\ SOLUTION ////

rest.js

app.factory('API', ['$resource', function($resource) { return $resource('/link'); }]);

app.controller('GetAll', ['$scope', 'API', function ($scope, API) {
    API.query().$promise.then(function(links) {
        $scope.links = links;
    });
}]);

Thanks to @dfsq help :)

What about it isn't working? Are you getting any error messages? Is a network request being made? You got: 1) a factory, 2) a use of $resource service, 3) a view with expression bindings. Which bit isn't working? — Snixtor, Jun 16 '16 at 21:53
I get this on my page : **MEAN Stack urlShortener** {{link.itemId}} --> {{link.url}} — Pierre C., Jun 16 '16 at 21:57
Are you familiar with the browser *console*. It's where you'll see error messages. It's where you can write output during JavaScript execution to help diagnose things. You really **must** get familiar with it if you're going to get anywhere with JavaScript debugging. https://developer.chrome.com/devtools/docs/console https://developer.mozilla.org/en/docs/Tools/Web_Console — Snixtor, Jun 16 '16 at 22:28

dfsq · Accepted Answer · 2016-06-17T06:12:16.507

1

You can't just assign $resource instance to $scope.links, you need to do it when underlying promise resolves:

app.controller('GetAll', ['$scope', 'API', function ($scope, API) {
    API.get().$promise.then(function(links) {
        $scope.links = links;
    });
}]);

edited Jun 17 '16 at 06:12

answered Jun 16 '16 at 21:52

dfsq

191,768
25
236
258

I don't understand what it supposed to do, but it' not working :( – Pierre C. Jun 16 '16 at 21:55
What you don't understand? Just to make sure, you fixed your syntax errors in the code (brackets)? Then I posted the snippet that you need to use. – dfsq Jun 16 '16 at 21:56
Is there any error in my factory ? I replaced my entire controller with your snippet :/ – Pierre C. Jun 16 '16 at 22:02
Yes, there is error. You don't check console, do you? it's very obvious syntax problem, once you put missing brackets it should work. – dfsq Jun 16 '16 at 22:05
Nope I don't just see that x) – Pierre C. Jun 16 '16 at 22:11
Trying to fix this problem ^^ – Pierre C. Jun 16 '16 at 22:11
I'm can't deal with it :( Can you help me I'm new to Angular and JS in general :/ – Pierre C. Jun 16 '16 at 22:17
Try to replace your factory with this `app.factory('API', ['$resource', function($resource) { return $resource('/link'); }]);`. – dfsq Jun 16 '16 at 22:21
so ... go on $http :/ – Pierre C. Jun 16 '16 at 22:43
`get` is to fetch single object. `query` is for collection of items. Try `API.query().$promise...`. – dfsq Jun 17 '16 at 11:40

score 1 · Answer 2 · answered Jun 16 '16 at 22:14

1

You have to inject "API" in your controller.

app.controller('GetAll', function ($scope, API) {
    $scope.links = API.get();
});

answered Jun 16 '16 at 22:14

Marian Toader

81
1
7

score 1 · Answer 3 · answered Jun 17 '16 at 12:44

If your rest service returns an array of objects you need to use query function.

$scope.links = API.query(); // instead of API.get()

If you need to do anything else when the promise returns use something like this:

API.query().$promise.then(function(result){
     $scope.links = result;
     // any other operation related to the request here
});

score 0 · Answer 4 · answered Jun 16 '16 at 21:47

if you want to do api requests, use $http

this is a piece of code I use in my app:

angular

    .module('myApp')
    .factory('apiFactory', apiFactory);

function apiFactory($http) {

    return {
        getDataFromApi: getDataFromApi,
    };

    function getDataFromApi(url) {

        return $http({
            method: 'GET', // or post or whatever
            url: url,
            headers: {
               ...
            }
        })

        .then(success)
        .catch(fail);

        function success(response) {
            return response.data;
        }

        function fail(response) {
            // handle error
        }

    }

}

yeah this is where I start but refering to the Angular $http API, **For a higher level of abstraction, please check out the $resource service.** ... — Pierre C., Jun 16 '16 at 21:49

score 0 · Answer 5 · edited May 23 '17 at 12:08

Is this what you are looking for? API For Resources

services.factory('Api', ['$resource',
 function($resource) {
  return {
     Recipe: $resource('/recipes/:id', {id: '@id'}),
     Users:  $resource('/users/:id', {id: '@id'}),
     Group:  $resource('/groups/:id', {id: '@id'})
  };
}]);

function myCtrl($scope, Api){
  $scope.recipe = Api.Recipe.get({id: 1});
  $scope.users = Api.Users.query();
  ...
}

Need help on Angular Factory

5 Answers5