Question

我试图通过遵循Vojtajina的指南来使用html2js预处理器，但我似乎无法理解其工作原理。

在我的情况下，我有一个指令使用templateUrl来提供指令中的html。在我的测试中，我从文件硬编码html，但如果html发生变化，这将成为问题。

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

    elm = angular.element('<div class="header_wrapper shadow-vertical" ng-show="header.show">'+
                '<div class="header-container">'+

                    '<div class="pull-left">'+
                        '<img width="105" height="75" title="" alt=http://www.cvs.com ng-src="resources/images/logo.png">'+
                    '</div>'+

                    '<div class="pull-left" style="margin: 20px"><span class="header_title">{{header.headerTitle}}</span></div>'+

                    '<div class="logout">'+
                        '<a ng-href="#/logout" ng-click="placeHolder">Logout</a>'+
                    '</div>'+  

                    '<div class="help">'+
                        '<a ng-href="#" ng-click="placeHolder">Help</a>'+
                    '</div>'+

                    '<div class="user">'+
                        '<div>'+
                            '<b class="header-text">Corporation</b>'+
                        '</div>'+
                        '<div>Welcome {{header.headerFirstName}} {{header.headerSurname}}</div>'+
                    '</div>'+

                '</div>'+
            '</div>');
     // Compiles the directive and links it to the scope
     $compile(elm)(scope);
     scope.$digest();
}));

当我执行上述操作时，我的所有测试都通过了，但我希望能够从templateUrl加载html。我在本地安装了html2js到我的项目并修改了karma.conf.js文件，如下所示：

preprocessors: {
      'src/main/webapp/partials/common/components/header-bar/header-bar.html': 'ng-html2js'
},

ngHtml2JsPreprocessor: {

  // setting this option will create only a single module that contains templates
  // from all the files, so you can load them all with module('foo')
  moduleName: 'loadTemplates'
},

预处理器目标文件也在files属性中设置。我没有得到failed to load modules error，但这可能是因为我没有以理想的方式加载html。你如何在beforeEach区块中这样做？

我以为我可以这样做：

elm = angular.element( '<div header-bar></div>' );

但这会导致所有测试失败并返回Unexpected request: GET

由于

Answer 1

你的业力配置应如下所示：

files: [

  ...,

  // ensure that the template file is included here in files:
  'src/main/webapp/partials/common/components/header-bar/header-bar.html'
],

preprocessors: {
  'src/main/webapp/partials/common/components/header-bar/header-bar.html': 'ng-html2js'
},

ngHtml2JsPreprocessor: {
  // to make the template id match the one in your templateUrl
  stripPrefix: 'src/main/webapp/',

  // setting this option will create only a single module that contains templates
  // from all the files, so you can load them all with module('foo')
  moduleName: 'loadTemplates'
}

在单元测试中，您必须加载上面moduleName:配置ngHtml2JsPreprocessor中指定的模块，如下所示：

beforeEach(module('loadTemplates'));

希望这有帮助。

如何使用html2js预处理器？

1 个答案: