AngularJS设计指南

Question

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

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

我没有设计问题,事实上我认为它很好,因为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.这是控制器测试文件,这是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
  });
};

UPDATE

我已经弄清了测试中的错误,我不得不模拟配置的其他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.像录像机这样的东西会有所帮助.

Answer 1

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

1. 使用@Lukasz 的博客文章中的 RequireJS

第二个是脏的，我就是这么做的，

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

   在 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']);
}());

然后files: ['app/config.js', 'app/controllers/**/*.js', 'app/services/**/*.js']在 karma.conf.js 中执行