Angularjs 角度应用、服务和工厂

我有以下角度代码：

  var application = angular.module('Application', []);

  application.controller('ImageController', function ImageController($scope, $http) {

    $http.get('api/images').
      success(function (data, status, headers, config) {
        $scope.images = data;
      }).
      error(function (data, status, headers, config) { });

    $scope.vote = function (image) {

      $http.post('api/images/{key}/vote', { key: image.Key }).
        success(function (data, status, headers, config) {
        }).
        error(function (data, status, headers, config) {
        });

    };

  });

当控制器共享同一应用程序时，如何在不同文件中设置控制器？ 我想我应该使用不同的方法来定义控制器： application.controller（'ImageController'

我想我应该从控制器中删除$http部分，对吗？ 我读了一些关于Angular工厂和服务的文章，但我不知道该用哪一个

我对工厂的理解是按要求提供服务。 至少在C#中通常是这样使用的

但在我的示例中，如何将$http部分删除到服务/工厂

如何将其注入控制器

1） 您只需在新文件中调用模块，但不要重新定义它：

var application = angular.module('Application'); // no second parameter!

application.controller('newController', ...

或者，如果

应用程序

是全局的，只需省略第一行即可。从技术上讲，每个文件可以有一个控制器，没有问题

注意：必须省略

module（）

方法中的第二个参数，请参见此处的

创建与检索：

2） 是的，这些东西通常保存在服务/工厂中：

工厂

application.service('myService', function($http) {
    return {
        getStuff: function() { 
            return $http.get('api/images');
        },
        postStuff: function(image) { 
            return $http.post('api/images/{key}/vote', { key: image.Key });
        }
    }
});

控制器：

application.controller('ImageController', function ($scope, myService) {

   myService.getStuff()
      .success(function (data, status, headers, config) {
        $scope.images = data;
      })
      .error(function (data, status, headers, config) { });

   $scope.vote = function (image) {

     myService.postStuff(image)
        .success(function (data, status, headers, config) {
        })
        .error(function (data, status, headers, config) {
        });

    };

  });

注意，我必须将服务作为依赖项注入控制器


在这里可以看到完整的工作版本（我添加了一个假的json文件，因为我们当然无法访问API）。它在单独的文件中显示代码，以及如何与服务交互：
控制器函数接受函数的第二个参数，此函数ImageController可以在任何地方定义，包括另一个文件

需要记住的一些事情是，您需要使用正在注入的一系列服务来定义$inject属性，以确保小型化安全

var application = angular.module('Application', []);
application.controller('ImageController', ImageController);

然后在其他地方：

function ImageController($scope, $http) {
  $http.get('api/images').
   success(function (data, status, headers, config) {
     $scope.images = data;
  }).
  error(function (data, status, headers, config) { });

  $scope.vote = function (image) {

    $http.post('api/images/{key}/vote', { key: image.Key }).
    success(function (data, status, headers, config) {
    }).
    error(function (data, status, headers, config) {
    });

  };
}
ImageController.$inject(['$scope','$http'])

或者，您可以在控制器文件中注册控制器，只允许包含任何给定页面所需的控制器，但是我更喜欢将应用程序的控制器作为一个整体捆绑起来并缓存它。将应用程序连接到一个文件中，类似于其他语言生态系统中的DI配置。如果要将代码拆分为单独的文件，则可能需要在每个文件中创建单独的模块。然后，通过在创建模块时在方括号内列出这些模块的名称，可以将这些模块作为主应用程序模块的依赖项添加。见下面的例子

2） 很好地描述了工厂和服务之间的区别。基本上，你可以用两者做同样的事情；你只是用不同的方式写。注入工厂/服务的方式与注入其他内容的方式相同（如
$http
或
$scope
）

如果定义工厂，它可能如下所示：

MyFactory.js

(function() {
  var application = angular.module('MyFactoryModule', []);

  application.factory('MyFactory', function ($http) {
    var myFactory = {
      images: null
    };

    $http.get('api/images').
      success(function (data, status, headers, config) {
        myFactory.images = data;
      }).
      error(function (data, status, headers, config) { });

    myFactory.vote = function (image) {
     $http.post('api/images/{key}/vote', { key: image.Key }).
       success(function (data, status, headers, config) {
       }).
       error(function (data, status, headers, config) {
       });
    };

    return myFactory;
  });
})();

(function() {
  // Notice how Application depends on MyFactoryModule
  var application = angular.module('Application', ['MyFactoryModule']);

  application.controller('ImageController', function ($scope, MyFactory) {

    // Example of how you might use MyFactory:
    MyFactory.vote(MyFactory.images[0]);

  });
})();

Application.js

(function() {
  var application = angular.module('MyFactoryModule', []);

  application.factory('MyFactory', function ($http) {
    var myFactory = {
      images: null
    };

    $http.get('api/images').
      success(function (data, status, headers, config) {
        myFactory.images = data;
      }).
      error(function (data, status, headers, config) { });

    myFactory.vote = function (image) {
     $http.post('api/images/{key}/vote', { key: image.Key }).
       success(function (data, status, headers, config) {
       }).
       error(function (data, status, headers, config) {
       });
    };

    return myFactory;
  });
})();

(function() {
  // Notice how Application depends on MyFactoryModule
  var application = angular.module('Application', ['MyFactoryModule']);

  application.controller('ImageController', function ($scope, MyFactory) {

    // Example of how you might use MyFactory:
    MyFactory.vote(MyFactory.images[0]);

  });
})();

如果应用程序足够大，可能需要定义几个模块。也就是说，在大多数情况下，Shomz答案就是你要做的。@SamuelEUSTACHI是的，同样的原则适用于多个模块。