如何在角度指令凉亭包中使用单独的模板？

So I have a large set of directives I created that I want to use on many projects, so I turned it into a bower package and included it in one of my projects. Unfortunately the directives won't work, because the templateUrl path is incorrect.

所以我创建了一大堆我想在许多项目中使用的指令,所以我把它变成了一个bower包并将它包含在我的一个项目中。不幸的是,指令不起作用,因为templateUrl路径不正确。

The templateUrls are based on the templates being in the same directory as the js for the directives. So "./tabbedtextareas.html" What are some of my simpler options for solving this problem?

templateUrls基于与指令的js位于同一目录中的模板。那么“./tabbedtextareas.html”我解决这个问题的一些简单选择是什么?

The ones I've thought of so far are:

到目前为止我想到的是:

• copy and paste the html into the JS files
  • editing the templates will be a pain afterwards

  编辑模板后会很痛苦

将html复制并粘贴到JS文件中,编辑模板后会很痛苦

• use grunt to compile the templates with the JS, perhaps even creating a hook to commit, merge to master and push.
  • This is a very simple plugin and I prefer to keep things as simple as possible.

  这是一个非常简单的插件,我更喜欢让事情尽可能简单。

使用grunt用JS编译模板,甚至可以创建一个钩子来提交,合并到master和push。这是一个非常简单的插件,我更喜欢让事情尽可能简单。

• put my templates in a directory, then in each project have my server handle requests to that folder.
  • anyone requiring my directives as a dependency in bower would need to do know this specific thing. Ie. the package would not installable simply by bower install.

  任何需要我的指令作为凉亭依赖的人都需要知道这个具体的事情。 IE浏览器。只有通过凉亭安装才能安装包裹。

把我的模板放在一个目录中,然后在每个项目中让我的服务器处理对该文件夹的请求。任何需要我的指令作为凉亭依赖的人都需要知道这个具体的事情。 IE浏览器。只有通过凉亭安装才能安装包裹。

Is there maybe like a bower install script you can add or something? Any help is appreciated.

是否可能像您可以添加的凉亭安装脚本或其他东西?任何帮助表示赞赏。

2 个解决方案

#1

I've been on the hunt for guidance/advice on this very problem, and have considered a number of different options. I thought I'd share what I've settled on currently.

我一直在寻找关于这个问题的指导/建议,并考虑了许多不同的选择。我以为我会分享我目前已经解决的问题。

N.B. the project that this is approach is being used on is still in its early stages, so the approach described is by no means set in stone. I wouldn't be surprised if I had to adapt/change it in the future.

注:正在使用这种方法的项目仍处于早期阶段,因此所描述的方法绝不是一成不变的。如果我将来必须适应/改变它,我不会感到惊讶。

Background context is the same, we've got multiple self-contained directives living on GitHub that are used via bower. Each components template has to be inline with the directive, as templateUrl paths won't work.

背景上下文是相同的,我们在GitHub上有多个自包含的指令,通过bower使用。每个组件模板必须与指令内联,因为templateUrl路径不起作用。

I'm essentially doing option 2 from above, using gulp, and leveraging the angular template cache using the gulp-angular-templatecache plugin.

我基本上是从上面做选项2,使用gulp,并使用gulp-angular-templatecache插件利用角度模板缓存。

Solution

gulpfile.js

Does 2 things, parse component name and write template contents to template cache (via gulp plugin) and concatenate component code and mark-up into single file (into dist/<component-name>.js.

做两件事,解析组件名称并将模板内容写入模板缓存(通过gulp插件)并将组件代码和标记连接成单个文件(到dist / .js。

var gulp = require('gulp'),
    templates = require('gulp-angular-templatecache'),
    concat = require('gulp-concat'),
    clean = require('gulp-clean'),
    pkg = require('./package.json');

var template = 'myTemplate.tpl.html'

gulp.task('templates', function () {
  return gulp.src(template)
    .pipe(templates('templates.tmp', {
      root: '/templates/',
      module: pkg.name
    }))
    .pipe(gulp.dest('.'));
});

gulp.task('concat', ['templates'], function () {
  return gulp.src([pkg.main, 'templates.tmp'])
    .pipe(concat(pkg.name + '.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('clean', ['concat'], function () {
  gulp.src('./*.tmp', {read: false})
    .pipe(clean());
});

gulp.task('watch', function () {
  gulp.watch(['*.js', '*.html'], ['build']);
});

gulp.task('build', ['templates', 'concat', 'clean']);
gulp.task('default', ['build', 'watch']);

Output

The template gets set in the template cache, and the directive retrieves it via $templateCache.get(key) when setting the template attribute. This gives the single file output needed to use this component via bower, whilst allowing you to maintain the mark up in a separate file in source.

模板在模板缓存中设置,并且在设置模板属性时,指令通过$ templateCache.get(key)检索它。这提供了通过bower使用此组件所需的单个文件输出,同时允许您在源中的单独文件中维护标记。

angular.module('myModule', []).directive('myDirective', function ($templateCache) {

  return {
    template: $templateCache.get('/template/myTemplate.tpl.html');
    link: function (scope, elm, attr) {

    }
  };
});

angular.module("myModule").run(["$templateCache", function($templateCache) {$templateCache.put("/template/myTemplate.tpl.html","<div>This is the template for your component</div>");}]);

Thoughts

1. There's an additional overhead of having a build step when working on a component. Given the requirement, I don't think there's a way to completely avoid such a step. If it's not done during component build, then it'd have to be done at implementation time. Given those 2 options, I think it's better to do it in the component when the scope is narrow and clear.

   在处理组件时有一个构建步骤的额外开销。鉴于这一要求,我认为没有办法完全避免这一步骤。如果在组件构建期间没有完成,则必须在实现时完成。鉴于这两个选项,我认为当范围狭窄且清晰时,最好在组件中执行此选项。

2. I'm not convinced my gulp tasks are entirely optimal. There's a certain amount of synchronicity, which runs contrary to "the gulp way". Could probably figure out how to improve it with some time/effort.

   我不相信我的gulp任务是完全最优的。有一定程度的同步性,这与“gulp方式”相反。可能会想出如何用一些时间/精力来改进它。

#2

I used grunt-angular-templates "Grunt build task to concatenate & register your AngularJS templates in the $templateCache"

我使用grunt-angular-templates“Grunt构建任务来连接并在$ templateCache中注册你的AngularJS模板”

// within my Gruntfile.js
grunt.initConfig({
  ngtemplates: {
    'angular-my-directives': {
      src:      'views/**/*.html',
      dest:     'template.js'
    }
  }
  // ...
});

generates something like: ./template.js

生成如下内容:./ template.js

angular.module('angular-my-directives').run(['$templateCache', function($templateCache) {

  $templateCache.put('views/directives/my-download.html',
    "<form name=\"myDownloadForm\" ng-submit=\"submit()\" novalidate>\n" +
    "</form>"
  );

}]);

Now in my directive I can simply use templateUrl: 'views/directives/my-download.html' and it will use the $templateCache.

现在在我的指令中,我可以简单地使用templateUrl:'views / directives / my-download.html',它将使用$ templateCache。

Finally I used grunt-contrib-concat to combine my files for easy loading.

最后我使用grunt-contrib-concat来组合我的文件以便于加载。