2015-02-22 7 views
1

Я пытаюсь сгенерировать шаблон с использованием gulp-angular-templatecache и объединить его с угловым скриптом в один файл JS.AngularJS TemplateCache

глотком задача:

gulp.task('generatetemplatecache', function() { 
    return gulp.src(['dev/app/**/*.tpl.html']) 
    .pipe(minifyHTML({quotes: true})) 
    .pipe(templateCache({ module:'templateCache', standalone:true })) 
    .pipe(gulp.dest('public/app')); 
}); 

Это в основном, как выглядит результат:

var app = angular.module("app",['templateCache']); 
angular.module("templateCache", []).run(["$templateCache", function($templateCache) {$templateCache.put("test.tpl.html","<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>My Title</title></head><body></body></html>"); 
$templateCache.put("layout/popover.tpl.html","<h3 class=\"popover-title\">Click</h3><div class=\"popover-content\"><table style=\"width:600px\" class=\"table\"><tr ng-repeat=\"customer in customers\"><td>{{customer.name}}</td><td>{{customer.street}}</td></tr></table>ss</div>"); 

Но проблема, я обнаружил, что он не загружается из templatecache. Каждый раз, когда угловой нужен шаблон, он по-прежнему захватывает исходный шаблон html-файла. Если этот html-файл недоступен, он будет иметь проблемы с его отображением.

Почему это не работает? Любая часть, которую я делаю неправильно? URL-адрес в кеше шаблона относится к index.html или к корню домена?

+0

Что вы имеете в виду, когда говорите, что захватили исходный файл? Это означает, что вы меняете файл HTML и видите старые изменения в браузере? – sma

+0

@sma Я имею в виду, что по-прежнему нужен оригинальный файл. Если я заберу шаблон html-файла, у него возникнут проблемы с его загрузкой. – user1995781

+0

Можете ли вы опубликовать задание gulp, которое вы используете для создания файла шаблона? – sma

ответ

2

Необходимо проверить правильность пути при создании файла шаблона.

Например, в моем приложении, все мой исходный код организован таким образом:

modules 
    |---user 
     |---user-controller.js 
     |---user-service.js 
     |---user.html 

    |---navigation 
     |---navigation-controller.js 
     |---header.html 
     |---footer.html 

Так, в маршрутизаторе или в каких-либо директив для templateUrl свойств, я ссылаться на мои HTML файлы, такие как:

Итак, в моем Gulpfile, когда я создаю файл templateCache, я указываю корень из «модулей», чтобы каждому из файлов был задан ключ в templateCache, равный этому пути. Такие, как:

gulp.task('templates', function() { 
    gulp.src('./app/modules/**/*.html') 
     .pipe(angularTemplatecache('templates.js', { 
      standalone: true, 
      root: "modules" 
     })) 
     .pipe(gulp.dest('./app/templates')); 
}); 

Этот вопрос Pathing может быть, почему у вас возникли проблемы с загрузкой их, если все другие вопросы конфигурации являются правильными (т.е. вы загружаете файл templates.js правильно, вы включаете его в качестве модуля зависимости на вашем приложении)

0

Вы также можете использовать другой gulp plugin, который может читать ваши маршруты, директивы и заменять templateUrl шаблоном, на который ссылается шаблон templateUrl.

src 
+-hello-world 
    |-hello-world-directive.js 
    +-hello-world-template.html 

привет-мир-directive.js:

angular.module('test').directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     // relative path to template 
     templateUrl: 'hello-world-template.html' 
    }; 
}); 

привет-мир-template.html:

<strong> 
    Hello world! 
</strong> 

gulpfile.js:

var gulp = require('gulp'); 
var embedTemplates = require('gulp-angular-embed-templates'); 

gulp.task('js:build', function() { 
    gulp.src('src/scripts/**/*.js') 
     .pipe(embedTemplates()) 
     .pipe(gulp.dest('./dist')); 
}); 

gulp- Угловые встраиваемые шаблоны будут генерировать следующий файл:

angular.module('test').directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     template:'<strong>Hello world!</strong>' 
    }; 
}); 
Смежные вопросы