模块和控制器之间共享AngularJS REST服务(AngularJS shared REST s

2019-10-28 09:27发布

我需要有一组资源的工厂消耗REST API和使用,在我所有的模块和控制器。 我很困惑,究竟应该如何分开以及如何从控制器访问工厂。

举个例子,假设我有:

// rest.js
angular.module('myApp.rest', ['ngResource'] )
    .factory('Book', function ($resource) {
        return $resource('api/book', {}, {
            getBook: {
                method: 'GET'
            },
        });
    })

这里的主要模块myApp

 // app.js
 angular.module('myApp', [

        'ngRoute',
        'ngResource',

        'app.rest',
        'app.library'

    ])
      .config(['$routeProvider', function ($routeProvider) {
            $routeProvider.
                when('/book', {
                    templateUrl: 'someTemplate',
                    controller: 'LibraryCTRL',
                });

现在,我想有另一个名为模块app.library可以使用Book资源。 如何依赖注入会是什么样子?

更重要的问题:这是做正确的方式? 我的意思是它更好地整体连接Book工厂myApp或使用单独的myApp.rest模块?

// library.js
angular
    .module('myApp.library', ['ngResource']) // INJECT REST MODULE HERE?
    .controller('LibraryCtrl', Library);

// INJECT BOOK RESOURCE HERE? 
Library.$inject = [];

// USE BOOK IN THIS CONSTRUCTOR
function Library() {

    var vm = this;

    // USING IT
    Book.getBook(function(data){
         vm.book = data;
    });
}

Answer 1:

让我们抽象的问题

据我了解你想它可以在所有模块和控制器,负责消费REST API可用于工厂定制“服务”

所以你必须serviceModule.js

var ServiceApp = angular.module('ServiceApp', []);
ServiceApp
        .factory(
                'restControllerService',
                [
                        '$http',
                        function($http) {

                            var doRequest = 
                            function(URL) {
                                    return $http({
                                        method : 'get',
                                        url :  URL, 
                                       headers : {
                                       'Content-Type' :'application/json'
                                                 }
                                    });
                                    });
                                }

                            }
                            return {
                                getBook : function() {
                                    return doRequest('api/book');
                                }
                            };
                        } ]);

你可以注入像任何其他模块中

var library = angular.module('libraryModule', [ "ServiceApp" ]);
libraryModule.controller('LibraryCtrl', [
        '$scope',
        'restControllerService',
        function($scope,restControllerService) {

            $scope.book = null;

            $scope.getbook = function() {

                    restControllerService.getbook('api/book').success(
                            function(data) {
                                $scope.book = data;
                            }).error(function() {
                        $scope.book = null;
                    });
                }
            };      


Answer 2:

我相信你想这样做:对myApp - > myApp.library - myApp.rest>

你几乎没有。 只是要myApp.library注入myApp.rest模块。

angular
    .module('myApp.library', ['myApp.rest'])
    .controller('LibraryCtrl', ['Book', function(Book) {
     // use Book.getBook() here.
    }]);

此外,从对myApp模块删除myApp.rest和ngResource的依赖,因为你不使用他们那里。

angular.module('myApp', [
        'ngRoute',
        'app.library'
    ])

在一般情况下,只有当你直接在该模块中使用它添加一个依赖。

我不相信这是对如何代码分成模块的最佳做法。 就个人而言,我希望有一个单一的模块为整个应用程序,除非我想重用在其他应用程序中的一段代码。



文章来源: AngularJS shared REST service between modules and controllers