AngularJS设计指南

以前当我写angular应用程序时，我经常做

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

在我的app.js中，然后在services/和controllers中，我可以简单地执行：

angular.module('ngApp')

我有回购来证明这一点。

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

在controllers/ 中

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

在services/ 中

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

在app.js 中

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

我对设计没有任何问题，事实上我认为它很好，因为每一项都是注入依赖关系和模块化的。

我有一种情况，我的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回购。这是控制器测试文件，这是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。像录像机这样的东西会很有帮助。