在 Angular Factory 上需要帮助答案

【问题标题】：Need help on Angular Factory在 Angular Factory 上需要帮助
【发布时间】：2016-06-18 06:21:22
【问题描述】：

你好，角度社区！

我很困惑，我想我已经了解工厂的目的和概念，但似乎没有......

这是我的问题（对你来说肯定很简单）：

我想通过 Angular 和 .factory 使用我的 REST API（完美运行）...

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>

不工作... 2 小时我正在咨询 Angular API，但没有解决方案：/

请帮帮我，我在浪费时间:'(

\\\\ 解决方案 ////

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

感谢@dfsq help :)

【问题讨论】：

它不起作用怎么办？您是否收到任何错误消息？是否正在发出网络请求？你得到了：1）一个工厂，2）一个 $resource 服务的使用，3）一个带有表达式绑定的视图。哪个位不工作？
我在我的页面上看到了这个：MEAN Stack urlShortener {{link.itemId}} --> {{link.url}}
您熟悉浏览器控制台。这是您会看到错误消息的地方。在这里你可以在 JavaScript 执行期间编写输出来帮助诊断。如果您要在 JavaScript 调试方面取得任何进展，您真的必须熟悉它。 developer.chrome.com/devtools/docs/console developer.mozilla.org/en/docs/Tools/Web_Console
我很熟悉，只是忘了x)

标签： javascript angularjs angular-resource

【解决方案1】：

您不能只将 $resource 实例分配给 $scope.links，您需要在底层承诺解决时这样做：

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

【讨论】：

我不明白它应该做什么，但它不起作用:(
你不明白什么？只是为了确保您修复了代码中的语法错误（括号）？然后我贴出了你需要使用的sn-p。
我的工厂有问题吗？我用你的 sn-p 替换了我的整个控制器：/
是的，有错误。你不检查控制台，是吗？这是非常明显的语法问题，一旦你把缺少的括号它应该工作。
不，我不只是看到 x)

【解决方案2】：

您必须在控制器中注入“API”。

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

【讨论】：

【解决方案3】：

如果你的 rest 服务返回一个对象数组，你需要使用查询函数。

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

如果你需要在 Promise 返回时做其他事情，请使用如下代码：

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

【讨论】：

【解决方案4】：

如果你想做api请求，使用$http

这是我在应用中使用的一段代码：

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
        }

    }

}

【讨论】：

是的，这就是我开始的地方，但参考 Angular $http API，对于更高级别的抽象，请查看 $resource 服务。 ...跨度>
我只是想让它干净^^

【解决方案5】：

这就是你要找的吗？ 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();
  ...
}

【讨论】：