Angular 指令测试 - 错误：[$injector:modulerr] 无法实例化模块？答案

【问题标题】：Angular directive test - Error: [$injector:modulerr] Failed to instantiate module?Angular 指令测试 - 错误：[$injector:modulerr] 无法实例化模块？
【发布时间】：2015-01-02 15:44:46
【问题描述】：

我正在使用 Jasmine Standalone 来测试我的 Angular 目录，

SimpleDirective.js

var app = angular.module("myApp", []);

app.controller('SimpleDirectiveController', function($scope) {
    $scope.customer = {
      name: 'Igor',
      address: '123 Somewhere'
    };
});

app.directive('helloWorld', function() {
    return {
        restrict: 'AE',
        replace: true,

        // Isolate scope:
        // separate the scope inside a directive from the scope outside, and then map the outer scope to a directive's inner scope. 
        scope: {
            customerInfo: '=info'
        },

        //templateUrl points to an external html template.
        templateUrl: 'fixture/hello.html'
    };
});

fixture/hello.html,

<div class="customer"><b>Hello</b> {{customerInfo.name}}</div>

SimpleDirectiveSpec.js，

describe("simpleDirective Test ", function(){

    // Boilerplate starts from here...
    var compile, scope, element;

    // Name of the module my directive is in.
    beforeEach(module('myApp'));

    // The external template file referenced by templateUrl.
    beforeEach(module('fixture/hello.html'));

    beforeEach(inject(function($compile,$rootScope) {

        compile = $compile;
        scope = $rootScope;

        element = angular.element('<div data-hello-world info="customer"></div>');
        compile(element)(scope);
        scope.$digest();
    }));
    // ...Boilerplate ends here

    it('renders the customer template', function() {
        var customer = element.find('.customer');
        expect(customer.length).toBe(1);
    });

});

我收到此错误，

错误：[$injector:modulerr] 无法实例化模块 fixture/hello.html 由于：[$injector:nomod] 模块 'fixture/hello.html' 不可用！你要么拼错了模块名称或忘记加载它。如果注册一个模块，请确保您将依赖项指定为第二个参数。

任何想法我错过了什么？

【问题讨论】：

标签： angularjs angularjs-directive jasmine

【解决方案1】：

您应该为您的模板创建一个模块并将您的模板 html 放入 templateCache。

应该是这样的：

angular.module("fixture/hello.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("fixture/hello.html",
    "<div class=\"customer\"><b>Hello</b> {{customerInfo.name}}</div>");
}]);

如果您使用 Karma 进行测试，则有一个用于此目的的自动化 karma 模块，称为 ng-html2js。

【讨论】：

嗯，它应该被加载到你的测试浏览器中。所以，现在试着把它放到 SimpleDirectiveSpec.js 中。如果它有效，那么您应该检查 ng-html2js 以自动将其注入您的测试浏览器。
如果你正在使用 Grunt，你可以使用这个模块：github.com/karlgoldstein/grunt-html2js
谢谢。我把它放在 SimpleDirectiveSpec.js 中，然后我对it('renders the customer template', function() { var customer = element.find('.customer'); expect(customer.length).toBe(1); });的测试失败了
你在这个项目中使用 jQuery 吗？如果没有，jqLite 查找方法仅限于按标签名称查找。在这里查看：stackoverflow.com/questions/17283697/…
很高兴我找到了这篇文章。我一直在努力尝试从 templateUrl 加载指令 6 个小时。 ng-html2js 预处理器对我不起作用。感谢您的回答！

【解决方案2】：

我假设您正在为 html 模板 https://github.com/karma-runner/karma-ng-html2js-preprocessor 使用 karma html 预处理器。确保生成的模块的路径名称与您声明的模块名称相匹配 'fixture/hello.html'。

您可以通过打开 chrome 开发者控制台并检查 source 选项卡来验证文件，模块将作为 js 文件加载。确保生成的模块名称匹配。

【讨论】：

我没有使用 Karma。我在 Jasmine Standalone 上。