У меня такая настройка маршрута:
var myApp = angular.module('myApp', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/landing', {
templateUrl: '/landing-partial',
controller: landingController
}).
when('/:wkspId/query', {
templateUrl: '/query-partial',
controller: queryController
}).
otherwise({
redirectTo: '/landing'
});
}]);
Я хочу иметь возможность заставить angularjs загружать обе части в начале, а не по запросу.
Является ли это возможным?
<script>
тег вместе с включениями на стороне сервера. Это позволяет мне хранить свои частичные файлы в виде отдельных файлов для организационных целей, но при этом все сводится к одному документу.Если вы используете Grunt для сборки своего проекта, существует плагин, который автоматически соберет ваши частичные данные в модуль Angular, который использует $ templateCache. Вы можете объединить этот модуль с остальной частью вашего кода и загрузить все из одного файла при запуске.
https://npmjs.org/package/grunt-html2js
источник
grunt-angular-templates
есть то же самое - npmjs.org/package/grunt-angular-templates - отлично работает,Добавьте задачу сборки для объединения и регистрации ваших html-файлов в файле Angular
$templateCache
. ( Этот ответ представляет собой более подробный вариант ответа Карлгольда. )Для grunt используйте шаблоны grunt-angular . Для gulp используйте gulp-angular-templatecache .
Ниже приведены фрагменты конфигурации / кода для иллюстрации.
gruntfile.js Пример:
ngtemplates: { app: { src: ['app/partials/**.html', 'app/views/**.html'], dest: 'app/scripts/templates.js' }, options: { module: 'myModule' } }
gulpfile.js Пример:
var templateCache = require('gulp-angular-templatecache'); var paths = ['app/partials/.html', 'app/views/.html']; gulp.task('createTemplateCache', function () { return gulp.src(paths) .pipe(templateCache('templates.js', { module: 'myModule', root:'app/views'})) .pipe(gulp.dest('app/scripts')); });
templates.js (этот файл автоматически создается задачей сборки)
$templateCache.put('app/views/main.html', "<div class=\"main\">\r"...
index.html
<script src="app/scripts/templates.js"></script> <div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div>
источник
Если вы заключите каждый шаблон в тег скрипта, например:
<script id="about.html" type="text/ng-template"> <div> <h3>About</h3> This is the About page Its cool! </div> </script>
Объедините все шаблоны в один большой файл. Если вы используете Visual Studio 2013, загрузите Web Essentials - он добавляет меню правой кнопки мыши для создания пакета HTML.
Добавьте код, который написал этот парень, чтобы изменить
$templatecache
сервис angular - это всего лишь небольшой фрагмент кода, и он работает: Суть Войты ДжиныЕго
$http.get
нужно изменить, чтобы использовать файл пакета:allTplPromise = $http.get('templates/templateBundle.min.html').then(
Ваши маршруты
templateUrl
должны выглядеть так:$routeProvider.when( "/about", { controller: "", templateUrl: "about.html" } );
источник
Если вы используете rails, вы можете использовать конвейер ресурсов для компиляции и переноса всех ваших шаблонов haml / erb в модуль шаблона, который можно добавить в файл application.js. Оформить заказ http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading
источник
Я просто
eco
выполняю работу за себя.eco
по умолчанию поддерживается Sprockets. Это сокращение от Embedded Coffeescript, который принимает экологический файл и компилируется в файл шаблона Javascript, и этот файл будет обрабатываться как любые другие файлы js, которые есть в папке с ресурсами.Все, что вам нужно сделать, это создать шаблон с расширением .jst.eco и написать там некоторый html-код, и rails автоматически скомпилирует и обслужит файл с конвейером ресурсов, и способ доступа к шаблону действительно прост:
JST['path/to/file']({var: value});
гдеpath/to/file
основан на логическом пути, поэтому, если у вас есть файл/assets/javascript/path/file.jst.eco
, вы можете получить доступ к шаблону по адресуJST['path/file']()
Чтобы он работал с angularjs, вы можете передать его в атрибут template вместо templateDir, и он начнет работать волшебным образом!
источник
Вы можете передать $ state своему контроллеру, а затем, когда страница загружается и вызывает геттер в контроллере, вы вызываете $ state.go ('index') или любую другую часть, которую вы хотите загрузить. Выполнено.
источник
Другой метод - использовать кэш приложений HTML5 для однократной загрузки всех файлов и сохранения их в кеше браузера. Ссылка выше содержит гораздо больше информации. Следующая информация взята из статьи:
Измените свой
<html>
тег, включив в негоmanifest
атрибут:<html manifest="http://www.example.com/example.mf">
Файл манифеста должен обслуживаться с mime-типом
text/cache-manifest
.Простой манифест выглядит примерно так:
CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js http://cdn.example.com/scripts/main.js
Когда приложение отключено, оно остается в кэше до тех пор, пока не произойдет одно из следующих событий:
источник