javascript - AngularJS 设计指南

Question

以前当我写 Angular 应用程序时，我曾经这样做

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'])..

我对设计没有意见，事实上我认为它很好，因为所有东西都是依赖注入(inject)和模块化的。

我有一个 services/movie.js 有

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

和services/config.js

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

但是在用 karma 和 jasmine 编写测试时。在 karma.conf.js 中，

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

但问题是 config.js 在 movie.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/");
    });
  });

});

session 。文件

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' 保存在一个文件中是有意义的。

如果您确实需要在多个文件中分解您的代码，您应该使用依赖注入(inject)并使它们各自成为一个单独的模块(参见 my patch against your repo)。这样加载顺序就不再是问题了。