如何使用html2js preprocessor？

问题描述

我试图按照从Vojtajina先导，以利用html2js preprocessor，但我似乎无法了解其工作。

I'm trying to make use of the html2js preprocessor by following the guide from Vojtajina but I can't seem to understand how its working.

在我来说，我有一个使用 templateUrl 来服务于HTML中的指令一个指令。在我的测试中，我很难code从文件的HTML，但是这将成为当HTML变化问题。

In my case I have a directive that uses templateUrl to serve the html in the directive. In my test I hardcode the html from the file but this will become problematic if the html changes.

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 文件看起来是这样的：

All my tests pass when I do the above but I want to beable to load the html from templateUrl. I installed the html2js locally to my project and modified the karma.conf.js file to look like this:

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'
},

在preprocessor目标文件也设定在文件属性了。我没有得到一个未能加载的模块误差但这可能是因为我不是装在理想的方式HTML。
你怎么去在 beforeEach 阻止这样做呢？

The preprocessor target file is also set in the files attribute too. I don't get a failed to load modules error but this is probably because I'm not loading the html in the ideal manner. How do you go about doing this in the beforeEach block?

我想我能做到这一点：

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

但是这会导致所有的测试失败，并返回一个意外的请求：GET

感谢

推荐答案

您因果报应的配置应该是这样的：

Your karma config should look like this:

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指定的模块：的 ngHtml2Js preprocessor ​​上面的配置是这样的：

And in the unit testing, you have to load the module specified in the moduleName: of ngHtml2JsPreprocessor config above like this:

beforeEach(module('loadTemplates'));

希望这有助于。

这篇关于如何使用html2js preprocessor？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！