充分利用我的工厂

Question

我是 Angular 的新手，所以如果你问这个问题："Why don't you...?"答案是......因为我不知道我可以。

让工厂进行 API 调用，然后将该工厂注入到父控制器中，该控制器的作用域将覆盖整个页面。然后嵌套子控制器并从父控制器继承。

这是我目前所拥有的。我可能离这里很远，如果是这样，请告诉我。我一个人在做这件事，没有任何帮助，所以欢迎任何帮助。

谢谢。

var app = angular.module('myApp', []);

app.factory('myFactory', function($http){
    var MyFactory = function(){};

    MyFactory.getParams = function(){
        return $http.get('/getparameters');
        .success(function(data){
            var roomname = data.roomname;
        })
        MyFactory.getRoom(roomname);
    };

    MyFactory.getRoom = function(room){
        return $http.get('/my/api/' + room);
    };


});

app.controller('RoomCtrl', function($scope, myFactory){
    $scope.data = myFactory;        
});

Answer 1

你不需要使用resource，你需要使用promise； 已编辑 我试着让你更清楚

app.factory('apicall', ['$q','$http',function($q, $http){

    function getRoom(options){
      var promise =  $http.get(options.paramUrl)
                    .success(function(data){
                         //handle your error
                         return $http.get(options.roomUrl + data.roomname);              
                     })
                     .error(function(msg){
                          return $q.when(msg)
                      })   
           return promise;
    }

   return {getRoom:getRoom};
 }])

如果你想在你想要的地方打电话给你的工厂

app.controller('RoomCtrl', ['$scope','apicall',function($scope, apicall){
       var options = {
                        paramUrl:'/getparameters',
                        roomUrl:'/my/api/'
                     }
       apicall.getRoom.all(function(result){
            $scope.data = result; 
        })

  }]);

Answer 2

我通常在不同的工厂中分离不同的 API 调用，return 一个 $resource。

例如，假设我们有 2 个不同的 API 调用指向不同的资源：

你的网站。com/user/:userId - return关于用户的数据

您的网站。com/photo/:photoId - return 一些照片的数据

在 angular 中，您可以将它们分成 2 个不同的工厂： "use strict";

angular.module("App.services").
factory("User",["$resource", function($resource){
    return $resource("yourwebsite.com/user/:userId"),{userId:"@userId"});
}]);

第二个

angular.module("App.services").
factory("Photo",["$resource", function($resource){
    return $resource("yourwebsite.com/photo/:photoId"),{photoId:"@photoId"});
}]);

在您的控制器中，您可以像这样使用它们：

angular.module("App.controllers").controller("TestController",["User","Photo", function(User, Photo){
    User.get({
        id:10
    }).$promise.then(function(data){
            console.log(data); //returns the data for user with the id=10
        });

    Photo.get({
            id:123
    }).$promise.then(function(data){
                console.log(data);
    });

}]);

通常 $resource 在 $resource 上映射一个 CRUD API(what I posted above is a basic example of a GET call).Check out the documentation - 它已经有基本的 GET, PUT, POST, DELETE 函数。

如果您对 URL 只有 1 个简单操作而不是全部 4 个，我建议使用 $http。然后，您可以在控制器中注入 $http 并在那里执行请求，而不是为其创建工厂。

如果您有 2 个请求并且它们是链接的（第二个请求取决于从第一个请求收到的数据），您必须等到第一个请求得到解决。使用 $resource，您可以按以下方式执行此操作：

angular.module("App.controllers").controller("TestController",["User","Photo", function(User, Photo){
        var user_promise = User.get({
            id:10
        }).$promise.then(function(data){
                console.log(data); //returns the data for user with the id=10
                return data;

            });

        var photo_promise = Photo.get({
                id:123
        }).$promise.then(function(data){
                    console.log(data);
                    return data;
        });

     user_promise.then(photo_promise).
      catch(function(error){
        console.log(error); //catch all errors from the whole promise chain
     });

    }]);

Answer 3

$q 服务帮助您处理两个异步调用的组合

app.factory('apicall', function($q, $http) {
  var deferred = $q.defer();

  $http.get('/getparameters')
    .success(
      function(data) {
        var roomname = data.roomname;
        $http.get(baseURL + 'room/' + roomname)
          .success(
            function(roomData) {
              deferred.resolve(roomData);
            }
        )
          .error(
            function() {
              deferred.reject();
            }
        )
      })
    .error(
      function() {
        deferred.reject();
      }
  );

  return deferred.promise;
});

这是您可以使用服务的控制器

app.controller('someCtrl', function(apicall) {
  apicall.then(
    function(roomData) {
      //success
    },
    function() {
      //error
    }
  )
})

充分利用我的工厂

Making the most of my factory

service

resources

factory

http

angularjs