将Browserify与Angular JS结合使用--将服务传递到控制器中

Using Browserify with Angular JS - - Passing a service into a Controller

本文关键字：服务 控制器 Browserify Angular JS 结合      更新时间：2023-09-26

正如标题所示，我最近开始了一个新项目，我正在使用Browserify（和Gulp）将我的Angular JS文件（和Angular源文件）连接到一个单独的文件-bundle.JS.

我决定将我的控制器、服务和指令拆分为单独的文件，然后使用Browserify将它们"要求"到我的app.js文件中，如下所示：

(function () {
    'use strict';
    require('angular');
    var tabCtrl = require('./controllers/tabs'),
    dataService = require('./services/');
    angular.module("citiToolsApp", [])
        .service('dataService', ['$scope', dataService])
        .controller('TabController', ['$scope', tabCtrl]);
}());

然而，当我试图从我的选项卡控制器中访问我的服务dataService时，如下所示：

module.exports = function($scope, tabController) {
    dataService.getPrograms(function (response) {
        console.log(response.data);
    });
};

我得到一个未定义的错误。我认为我需要将dataService传递到tabController中，但我不确定这样做的语法。有人能帮忙吗？

感谢

编辑

我还添加了我的服务文件的内容以获得更多细节：

module.exports = function($http) {
    this.getPrograms = function(callback) {
        $http.get('/programs')
            .then(callback);
    };
};

我意识到了自己的错误。我需要传入$http而不是$scope。所以不是：

(function () {
    'use strict';
    require('angular');
    var tabCtrl = require('./controllers/tabs'),
    dataService = require('./services/');
    angular.module("citiToolsApp", [])
        .service('dataService', ['$scope', dataService])
        .controller('TabController', ['$scope', tabCtrl]);
}());

应该是：

(function () {
    'use strict';
    require('angular');
    var tabCtrl = require('./controllers/tabs'),
    dataService = require('./services/');
    angular.module("citiToolsApp", [])
        .service('dataService', ['$http', dataService])
        .controller('TabController', ['$scope', tabCtrl]);
}());
相关文章：