Использовать кеш шаблона angular с помощью браузера

Я создаю небольшое приложение angular с браузером и ui-router. Поскольку я не хочу использовать сервер, я хочу сохранить все мои шаблоны с помощью angular $templateCache следующим образом:

exports.templateCache = ["$templateCache", function($templateCache) {
  'use strict';

  $templateCache.put('partials/someState.html',
    "myHtmlCode"
  );
}];

Чтобы заполнить кеш, я использую grunt, чтобы посмотреть в мою папку partials, захватить весь html и загрузить его в кеш с помощью grunt-angular-templates:

 ngtemplates:  {
  myApp: {
    cwd: 'dist/',
    src: 'partials/**.html',
    dest: 'src/js/templates/templates.js',
    options: {
      bootstrap:  function(module, script) {
        return 'exports.templateCache = ["$templateCache", function($templateCache) {\n' +
          script +
          '}];'
      }
    }
  }
},

Затем я использую browersify, чтобы объединить все мои js вместе:

browserify: {
  dist: {
    files: {
      'dist/js/app.js': [
          'src/js/templates/**',
          'src/app.js'
          ],
    }
  }
},

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

Есть ли способ сделать это более элегантно? Используется ли в браузере встроенные решения для решения этой проблемы?

Ответ 1

browserify-ng-html2js был разработан для решения этой проблемы.

Просто добавьте package.json:

"browserify": {
    "transform": ["browserify-ng-html2js"]
 }

И вы увидите, идет ли он на переговоры:)

Ответ 2

Попробуйте преобразовать для браузера, что даст вам возможность потребовать html файл (например, Stringify). Затем вы можете потребовать ('yourPartial.html') в качестве строки:

$templateCache.put('yourPartialId', require('./partials/yourPartial.html'));

// html file
<div ng-include=" 'yourPartialId' "></div>