Как динамически включать все части шаблона при использовании модуля в AngularJS

У меня есть несколько модулей, которые требуют загрузки некоторых частей шаблона при каждом использовании модуля. Я храню эти файлы в папке с именем partials внутри каждой подпапки модуля. Моей отправной точкой для моего приложения является meanjs, и я храню файл партиалов в public/modules//partials/*.html.

Я видел несколько примеров ng-include и директив, но, будучи новичком в AngularJS, каждый прочитанный образец еще больше сбивает меня с толку относительно того, что является наилучшей практикой/наиболее подходящим способом AngularJS для этого.


angularjs angularjs-directive angularjs-ng-include meanjs
person Finglish    schedule 19.11.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Сохраняйте свои части, когда захотите. Чтобы загрузить их все, используйте угловой кеш шаблонов.

Используйте Grunt или gulp для автоматической генерации. Лично я использую глоток.

Вот мой рабочий пример одного из моих проектов.

установить nodejs и npm

npm intall gulp -g

npm install gulp-angular-templatecache

создать gulpfile.js

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

gulp.task('generate', function () {
    gulp.src('public/*/partials/*.html')
        .pipe(templateCache('templates.js', {module: 'YOURMODULENAME', standalone: false}))
        .pipe(gulp.dest('public/js'));
});
 gulp.task('watch-partials', function () {
    gulp.watch('public/*/partials/*.html', ['generate']);
});

затем используйте его следующим образом:

gulp generate - регенерировать партиалы

gulp watch-partials - следите за изменениями файла, если частичные изменены, автоматически запускается задача generate для вас. :)

Еще одна вещь, не забудьте включить template.js в ваш html-файл.

<script src="public/js/template.js"></script>

Каждый раз, когда вы меняете свой частичный файл, не забывайте регенерировать кеш шаблона.

person qwetty    schedule 19.11.2014
comment
Модули GruntJS для этой цели: github.com/karlgoldstein/grunt-html2js или github.com/ericclemmons/grunt-angular-templates - person kozlice; 19.11.2014
comment
@qwent Спасибо! Это то, что мне нравится в Stackoverflow, ответы на вопросы, которые я должен был задать :) - person Finglish; 19.11.2014

arrow_upward
1
arrow_downward

Вы должны воспользоваться $templateCache. В вашей папке partials определите шаблоны следующим образом:

angular.module('yourTemplateModule', []).run('$templateCache', function ($templateCache) {
   $templateCache.put('yourTemplate', '<div>...some HTML here...</div>');
}

Затем создайте модуль с именем, например, «app.tpls», который имеет в качестве зависимостей все модули вашего шаблона. Внедрите его как зависимость к вашему основному модулю приложения, возможно, расположенному в meanjs, и теперь у вас есть готовые шаблоны, когда они вам понадобятся в вашем приложении. Вы получаете их, вызывая:

$templateCache.get('yourTemplate');
person boyomarinov    schedule 19.11.2014