Question

以前当我写角度应用程序时，我曾经做过

angular.module('ngApp', ['all', 'required', 'ng*', 'dependencies'])

在我的app.js中，然后在services/和controllers内，我可以这样做：

angular.module('ngApp')

我有一个repo来证明这一点。

但后来我看到了angular-seed/，实现的方式是，

controllers/

中的

angular.module('appControllers', ['dependencies'])...

services/

中的

angular.module('appServices', ['dependencies'])..

app.js中的

angular.module('ngApp', ['ng*', 'appControllers', 'appSrvices'])..

我没有设计问题，事实上我觉得它很好，因为evrything是依赖注入和模块化。

我的情况是services/movie.js有

angular.module('myAppServices', ['ngResource']).factory(..)

和services/config.js

angular.module('myAppServices').factory(..)

但是在用业力和茉莉花编写测试时。在karma.conf.js中，

我有 files: ['usual', 'bower_components/angular-*.js', 'app/services/**/*.js', '..']

但问题是在movie.js之前加载了config.js并且出现了错误，myAppServices未加载或拼写错误。

我修复它的方式是我做的：

files: ['..', 'app/services/movie.js', 'app/services/config.js']

我也为此设置了github repo。这是controller test file，这里是karma.conf。

我想知道采用这种模块化方法的可能方法是什么，而不必指定为我的测试加载文件的顺序。

这是我的第一次单元测试，它失败了：

Error: Unexpected request: GET https://api.themoviedb.org/3/configuration?api_key=2e329c92227ed8be07944ae447c9426f
Expected GET https://api.themoviedb.org/3/movie/top_rated?api_key=2e329c92227ed8be07944ae447c9426f

如果我能得到一些帮助来解决这个问题会很有帮助。

测试

describe('Controllers', function() {

  beforeEach(module('myApp'));
  beforeEach(module('myAppServices'));

  describe("MoviesCtrl", function() {
    var scope, ctrl, httpBackend;

    beforeEach(inject(function($httpBackend, $rootScope, _$controller_, Movie, Config) {
      httpBackend = $httpBackend;
      ctrl = _$controller_;
      scope = $rootScope.$new();
    }));

    it("should return a list of movies", function() {
      var data = {results: [{name: "Abc"}, {name: "Def"}]};

      httpBackend.
        expectGET("https://api.themoviedb.org/3/movie/top_rated?api_key=2e329c92227ed8be07944ae447c9426f").
        respond(data);
      ctrl('MoviesCtrl', { $scope: scope });
      httpBackend.flush()
      expect(scope.image).toEqual("https://api.themoviedb.org/3/");
    });
  });

});

CONF。文件

module.exports = function(config) {
  config.set({
    basePath: './',

    frameworks: ['jasmine'],

    files: [
      'app/bower_components/angular/angular.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      'app/bower_components/angular-resource/angular-resource.js',
      'app/bower_components/angular-route/angular-route.js',
      'app/services/movie.js',
      'app/services/config.js',
      'app/controllers/*.js',
      'app/app.js',
      'unit-tests/**/*.js'
    ],

    exclude: [
      'app/**/*.min.js'
    ],

    preprocessors: {
    },

    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

更新

我已经弄清了测试中的错误，我不得不模拟配置的其他http请求。感谢@Phil。

这是我现在的考试：

describe('Controllers', function() {
  beforeEach(module('myApp'));
  beforeEach(module('myAppServices'));

  describe("MoviesCtrl", function() {
    var scope, httpBackend;
    var config_data = { images: { base_url: "http://tmdb.com/t/p", backdrop_sizes: ["w300", "w500"]}},
        movie_data = {results: [{name: "Abc"}, {name: "Def"}]};

    beforeEach(inject(function($httpBackend, $rootScope, $controller) {
      httpBackend = $httpBackend;
      scope = $rootScope.$new();
       httpBackend.
        expectGET("https://api.themoviedb.org/3/configuration?api_key=2e329c92227ed8be07944ae447c9426f").
        respond(config_data);
      httpBackend.
        expectGET("https://api.themoviedb.org/3/movie/top_rated?api_key=2e329c92227ed8be07944ae447c9426f").
        respond(movie_data);
      $controller('MoviesCtrl', { $scope: scope });
    }));

    it("should return a list of movies", function() {
      expect(scope.image).toEqual({})

      httpBackend.flush();

      expect(scope.image.backdrop_size).toEqual("w300");
    });
  });

});

虽然我不确定这是否是正确的测试：P。像VCR这样的东西会有所帮助。

Answer 1

为什么要使用两个单独的文件，每行10行？在单独的文件中编写代码的目的是使其易于理解和维护。将模块'myAppServices'保存在一个文件中是有意义的。

如果你真的需要在多个文件中分解你的代码，你应该使用依赖注入并使它们成为一个单独的模块（参见my patch against your repo）。然后加载的顺序不再是一个问题。

Answer 2

我仍然没有找到解决这个问题的角度解决方案。仍有两种方法可以解决它。

在@Lukasz的博文

而第二个是脏的，我做了，

在services /，controllers /，directives /中写了一个_config.js文件，例如在services /中有angular.module('myAppServices', ['ngResource'])，

在karma.config.js中，我必须做files: ['app/services/_config.js', 'app/controllers/_config.js]。虽然问题仍然存在，因为我必须指定加载两个_config.js的顺序。

另一种方法是使用

app/config.js

(function() {
  angular.module('myAppServices', ['ngResource']);
  angular.module('myAppControllers', ['myAppServices']);
}());

然后在karma.conf.js

files: ['app/config.js', 'app/controllers/**/*.js', 'app/services/**/*.js']

AngularJS设计指南

更新

2 个答案: