如何在 AngularJs 中使用 Coffeescript 实用程序-类

Question

我使用 Coffeescript 作为我的 angular 应用程序的脚本和测试语言。 CoffeeScript 能够定义 classes，我想在我的应用程序中使用它。我想将从服务器接收到的 JSON 个对象包装到实用程序 classes.

中

假设我有一个名为 'dashboard' 的页面，它显示称为框的对象。所以我有以下控制器：

class DashboardCtrl
  constructor: ->
    @ctrlName = 'DashboardCtrl'
    @boxes = [
      new Box { id: '12344555', name: 'Box 1', rootId: 'box1_rootId' },
      new Box { id: '12344555', name: 'Box 2', rootId: 'box2_rootId' },
      new Box { id: '12344555', name: 'Box 3', rootId: 'box3_rootId' },
      new Box { id: '12344555', name: 'Box 4', rootId: 'box3_rootId' },
      new Box { id: '12344555', name: 'Box 5', rootId: 'box3_rootId' }
    ]

angular
  .module('dashboard')
  .controller 'DashboardCtrl', ['BoxAPI', DashboardCtrl]

哪个应该使用实用程序-class 'Box':

class Box
  constructor: (info) ->
    {@id, @name, @rootId} = info

这是通过以下单元测试测试的：

'use strict'

describe 'DashboardCtrl', ->
  ctrl = undefined

  beforeEach module 'dashboard', 'idgApis', 'lib'

  beforeEach inject ($rootScope, $controller) ->
    ctrl = $controller 'DashboardCtrl'

  it 'should load some boxes from the server', ->
    someBox = new Box {id: '12344555', name: 'Box 1', rootId: 'box1_rootId'}
    expect(ctrl.boxes).toContain someBox

导致此输出：

  DashboardCtrl > should load some boxes from the server
        ReferenceError: Can't find variable: Box
            at /home/roman/workspace/idg-frontend/build/app/js/dashboard/dashboard-controller.js:9
            at DashboardCtrl (/home/roman/workspace/idg-frontend/build/app/js/dashboard/dashboard-controller.js:9)
            at invoke (/home/roman/workspace/idg-frontend/bower_components/angular/angular.js:4185)
            at instantiate (/home/roman/workspace/idg-frontend/bower_components/angular/angular.js:4193)
            at /home/roman/workspace/idg-frontend/bower_components/angular/angular.js:8462
            at /home/roman/workspace/idg-frontend/build/test/app/dashboard/dashboard-controller_test.js:14
            at invoke (/home/roman/workspace/idg-frontend/bower_components/angular/angular.js:4185)
            at workFn (/home/roman/workspace/idg-frontend/bower_components/angular-mocks/angular-mocks.js:2364)
            at /home/roman/workspace/idg-frontend/node_modules/karma-jasmine/lib/boot.js:126
            at /home/roman/workspace/idg-frontend/node_modules/karma-jasmine/lib/adapter.js:171
            at http://localhost:9876/karma.js:185
            at http://localhost:9876/context.html:163
        undefined
        TypeError: 'undefined' is not an object (evaluating 'ctrl.boxes')
            at /home/roman/workspace/idg-frontend/build/test/app/dashboard/dashboard-controller_test.js:23
            at /home/roman/workspace/idg-frontend/node_modules/karma-jasmine/lib/boot.js:126
            at /home/roman/workspace/idg-frontend/node_modules/karma-jasmine/lib/adapter.js:171
            at http://localhost:9876/karma.js:185
            at http://localhost:9876/context.html:163

这在 Angular 中可行吗？如何使实用程序可用？如何让它发挥作用？

Answer 1

首先在你的模块中声明它，例如作为工厂：

angular
  .module 'dashboard'
  .factory 'Box', ->
    class Box
      constructor: (info) ->
        {@id, @name, @rootId} = info

然后在你的测试中你可以注入它：

describe 'DashboardCtrl', ->
  Box = undefined

  beforeEach module 'dashboard'

  beforeEach inject ($injector) ->
    Box = $injector.get 'Box'

现在您可以在 it 块中访问它。

如何在 AngularJs 中使用 Coffeescript 实用程序-类

How to use Coffeescript utility-classes in AngularJs

coffeescript

angularjs