在凉亭组件中包含 html 模板以获取角度

问题描述

我正在为我的 Angular 应用程序制作一些可重用的指令，将它们放在一个单独的 bower 组件中.

I'm making some reusable directives for my angular apps by putting them in a separate bower component.

我想为指令使用 templateUrl，这样我就不会被迫执行本文中的三个选项之一:如何在我的 angular 指令 bower 包中使用单独的模板? 这里是建议的适度解释:1 份副本和将 html 传递到 js 文件中，2 使用 grunt 将模板编译为 js，或 3 将模板放在不同的目录中并让服务器处理请求，以便仅安装 bower 时无法使用这些指令.

I would like to use a templateUrl for the directives so that I am not forced to do one of the three options in this post: How do I use separate templates with my angular directive bower package? Here is amoderate paraphrasing of the suggestions: 1 copy and past html in to the js file, 2 using grunt to compile the templates into js, or 3 put the templates in a different directory and have the server handle the requests, so that the directives are not usable by bower installation only.

是否有更好的方法来为组件中的指令使用模板文件，或者 bower 只是没有设置为以这种方式工作?

Is there a better way to use template files for the directives in the component, or is bower just not set up to work in this manner?

推荐答案

我确实解决了这个问题.很抱歉没有早点发布答案.

I did resolve this issue. I'm sorry for not posting the answer earlier.

我最终使用了 grunt-angular-templates

如果您使用的是 gulp，那么可能有类似的库.

If you are using gulp, there is probably a comparable library.

这是我的目录结构，我的html在模板目录中

This was my directory structure, with my html in the templates directory

project
 src
   controllers
   directives
   templates

这就是我在 Gruntfile 中配置它的选项的方式

And this is how I configured my the options for it in my Gruntfile

 grunt.initConfig({
 ...
 ngtemplates: {
   projectName: {
     cwd: 'src',
     src: 'templates/**/*.html',
     dest: 'src/templates/templates.js'
   }
 }

我有另一个 grunt 任务 grunt-contrib-concat 连接项目中的所有 javascript 文件.因此，模板被捆绑到最终的 js 文件中.

I have another grunt task grunt-contrib-concat to concat all the javascript files within the project. So, the templates get bundled into the final js file.

在代码和测试中，无论您加载的是 html 还是 javascript 版本，您都可以以相同的方式引用 html 文件.

In the code and tests, you will be able to reference your html files the same way regardless of if you are loading the html or javascript version.

例如:

angular.module('myModule')
  .directive('myModuleDirective', function () {
    return {
        restrict: 'E',
        templateUrl: 'templates/mainTemplate.html'
    };
});

这篇关于在凉亭组件中包含 html 模板以获取角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！