AngularJS – Как модулировать комбинацию директивы и шаблона?
Вопрос
Вот ситуация.У меня есть директива, которая зависит от 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
Как это удается другим людям?
Решение
Мне никогда не нравилось использовать строки шаблонов для создания шаблонов из-за проблем с удобством обслуживания.Я очень быстро создаю прототип HTML, поэтому выбираю рутинную задачу, которая читает мои файлы и обрабатывает их в один файл. $templateCache js-файл.
Решение
Задача сборки 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
Другие советы
имеют генеракодицетагкод и свойства templateUrl
.template
получает HTML-строку.Это не идеальное решение, потому что вам нужно поставить HTML в ваши JS.Но это общий шаблон для создателей библиотеки, чтобы поставить HTML-строку непосредственно на свойство template
, поэтому они могут обернуть свой модуль в один файл.
Вы можете захотеть сделать этот шаблон на шаблон сборки вам lib.
Посмотрите на yegular bower bower repo .
Одно решение этого, и мое лично предпочтительное решение этого, состоит в том, чтобы поставить шаблон в $templateCache
в функцию Module.run
.Таким образом, вам никогда не нужно беспокоиться о URL, относящемся к неправильной вещи - вы можете дать ему какую-либо произвольное идентифицирующее URL-адрес, и он никогда не потребует HTTP-запроса, чтобы получить этот шаблон для загрузки.
В вашем проекте вашего директива:
Создайте весь шаблон с именем файла 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 и т. Д.).
Вы можете сделать это с глоток с использованием 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.
Я уже дал Ответ Использование Grunt, чтобы создать файлы HTML в файл $ templatecache, но я с момента коммутируемыхЧтобы прогнать, так что кто-то, кто хочет следовать тому же процедуру, но с помощью Gulp, checkout Гульпу-угловой one-templatecache