AngularJS – Как модулировать комбинацию директивы и шаблона?

Question

Вот ситуация.У меня есть директива, которая зависит от templateUrl.

Директива выглядит примерно так:

angular.module('foo')
.directive('bar', function(){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: '/foo/bar.html',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

Эта директива является частью одного из моих приложений, и важно, чтобы она оставалась частью приложения.Однако я также хотел бы использовать ту же директиву в других проектах, и в настоящее время я использую Bower, чтобы перенести репозиторий в другие мои проекты.Однако эта директива будет нарушена, поскольку templateUrl будет неправильным.Bower клонирует весь мой проект, и фактический путь шаблона в другом моем проекте в лучшем случае должен быть таким:

/lib/public/foo/bar.html

Как это удается другим людям?

Answer 1

Мне никогда не нравилось использовать строки шаблонов для создания шаблонов из-за проблем с удобством обслуживания.Я очень быстро создаю прототип HTML, поэтому выбираю рутинную задачу, которая читает мои файлы и обрабатывает их в один файл. $templateCache js-файл.

Решение

Угловые шаблоны Grunt

Задача сборки Grunt, чтобы объединить и зарегистрировать свои шаблоны AngularJS в $ templatecache

// within my Gruntfile.js
grunt.initConfig({
  ngtemplates: {
    'angular-my-directives': {
      src:      'views/**/*.html', // where my view files are
      dest:     'src/templates.js' // single file of $templateCache
    }
  }
  // ...
});

генерирует что-то вроде: ./src/templates.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>"
  );

}]);

Теперь в моей директиве я могу просто использовать templateUrl: 'views/directives/my-download.html' и он будет использовать $templateCache.

Наконец я использовал хрюканье-вклад-конкат чтобы объединить мои файлы для облегчения загрузки.

Проверить "Grunt concat + uglify с исходными картами(или оставьте ссылку получше в комментариях), чтобы узнать, как объединить + уродовать (или min) js-файлы в один файл «dist».

Если вы работаете над своим собственным пакетом беседок..

Обязательно зафиксируйте объединенные (так называемые встроенные) файлы в репозиторий пакета, чтобы потребители вашего пакета могли просто включить my-concat-package.js или my-concat-package.min.js

Answer 2

Угловые директивы

имеют генеракодицетагкод и свойства templateUrl.template получает HTML-строку.Это не идеальное решение, потому что вам нужно поставить HTML в ваши JS.Но это общий шаблон для создателей библиотеки, чтобы поставить HTML-строку непосредственно на свойство template, поэтому они могут обернуть свой модуль в один файл.

Вы можете захотеть сделать этот шаблон на шаблон сборки вам lib.

Посмотрите на yegular bower bower repo .

Answer 3

Одно решение этого, и мое лично предпочтительное решение этого, состоит в том, чтобы поставить шаблон в $templateCache в функцию Module.run.Таким образом, вам никогда не нужно беспокоиться о URL, относящемся к неправильной вещи - вы можете дать ему какую-либо произвольное идентифицирующее URL-адрес, и он никогда не потребует HTTP-запроса, чтобы получить этот шаблон для загрузки.

Answer 4

В вашем проекте вашего директива:

Создайте весь шаблон с именем файла xyz.tpl.html и поместите в свой режим Direction со всем кодом JS.Все Templateurl выглядит как

templateurl: '/template/my.tpl.html'

в проекте приложений:

Создайте задачу Gulp / Grunt в вашем проекте для копирования файла всех * .tpl.html в / шаблон / dir от bower_components (по умолчанию).

e.g.:

// copy template files
gulp.task('copy-tpl', function() {
    return gulp.src([
        config.dirs.src.bower_components + '/**/*.tpl.html'
    ])
            .pipe(flatten())
            .pipe(gulp.dest(config.dirs.build.tpl));
});

.

<Сильные> Важные! / Шаблон dir - это конвенция (как JS, CSS и т. Д.).

Answer 5

Вы можете сделать это с глоток с использованием gulp-angular-templatecache.

Ваша директива будет выглядеть так:

angular.module('foo').directive('bar', function($templateCache){
  return {
    restrict: 'E',
    replace: true,
    template: '$templateCache.get('bar.html')',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

И ваш gulpfile.js будет выглядеть так:

var gulp = require('gulp'),
    addTemplates = require('gulp-angular-templatecache');

gulp.task('default', function() {
    gulp.src('templatesDir/**/*.html')
        .pipe(addTemplates('templateFile.js', {module: 'foo' }))
        .pipe(gulp.dest('dist'));
});

В результате в вашей папке dist будет создан файл templateFile.js, который затем можно будет упаковать вместе с файлом директив в файл Bower.json.

Answer 6

Я уже дал Ответ Использование Grunt, чтобы создать файлы HTML в файл $ templatecache, но я с момента коммутируемыхЧтобы прогнать, так что кто-то, кто хочет следовать тому же процедуру, но с помощью Gulp, checkout Гульпу-угловой one-templatecache