【问题标题】:Using Browserify with Angular JS - - Passing a service into a Controller使用带有 Angular JS 的 Browserify - - 将服务传递给控制器
【发布时间】:2016-09-01 10:58:38
【问题描述】:

正如标题所示,我最近开始了一个新项目,我使用 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);
    };

};

【问题讨论】:

  • tabCtrl 和 dataService 都应该返回它们的完整定义,包括数组注释。我并不是说这是解决您问题的方法,但我确实认为这是朝着正确方向迈出的一步。
  • 感谢您的回复。你介意用一个代码示例来概括你的意思吗?这真的很有帮助。抱歉,我对 Angular 和 Browserify 有点陌生。

标签: javascript angularjs browserify angularjs-service angularjs-controller


【解决方案1】:

我已经意识到自己的错误。我需要传入 $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]);
}());

【讨论】:

    猜你喜欢
    • 2015-02-03
    • 1970-01-01
    • 1970-01-01
    • 2016-03-27
    • 1970-01-01
    • 1970-01-01
    • 2014-05-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多