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
– Snixtor, Commented Jun 16, 2016 at 21:53
I get this on my page : MEAN Stack urlShortener {{link.itemId}} --> {{link.url}} — Pierre Cavin
– Pierre Cavin, Commented Jun 16, 2016 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. developer.chrome.com/devtools/docs/console developer.mozilla.org/en/docs/Tools/Web_Console — Snixtor
– Snixtor, Commented Jun 16, 2016 at 22:28

dfsq · Accepted Answer · 2016-06-17 06:12:16Z

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, 2016 at 6:12

answered Jun 16, 2016 at 21:52

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

10 Comments

Pierre Cavin Over a year ago

I don't understand what it supposed to do, but it' not working :(

dfsq Over a year ago

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.

Pierre Cavin Over a year ago

Is there any error in my factory ? I replaced my entire controller with your snippet :/

dfsq Over a year ago

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.

Pierre Cavin Over a year ago

Nope I don't just see that x)

|

Marian Toader · Accepted Answer · 2016-06-16 22:14:17Z

1

You have to inject "API" in your controller.

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

answered Jun 16, 2016 at 22:14

Marian Toader

811 silver badge7 bronze badges

Comments

Marian Toader · Accepted Answer · 2016-06-17 12:44:14Z

1

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
});

answered Jun 17, 2016 at 12:44

Marian Toader

811 silver badge7 bronze badges

Comments

matt93 · Accepted Answer · 2016-06-16 21:47:23Z

0

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
        }

    }

}

answered Jun 16, 2016 at 21:47

matt93

3765 silver badges15 bronze badges

2 Comments

Pierre Cavin Over a year ago

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 Cavin Over a year ago

I just want to make it clean ^^

Community · Accepted Answer · 2017-05-23 12:08:28Z

0

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();
  ...
}

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jun 17, 2016 at 0:25

Farhan

5035 silver badges16 bronze badges

Collectives™ on Stack Overflow

Need help on Angular Factory

5 Answers 5

10 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related