Есть ли способ заставить AngularJS загружать частичные файлы в начале, а не при необходимости?

У меня есть такая настройка маршрута:

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 мог загружать как частичные в начале, так и не по запросу.

это возможно?

8 ответов


Да, есть как минимум 2 решения:

  1. использовать script директива (http://docs.angularjs.org/api/ng.directive:script), чтобы поместить ваши частичные файлы в изначально загруженный HTML
  2. вы также можете заполнить в $templateCache (http://docs.angularjs.org/api/ng.$templateCache) из JavaScript, если необходимо (возможно, на основе результата $http звонок)

если вы хотите использовать метод (2), чтобы заполнить $templateCache вы можете сделать это так:

$templateCache.put('second.html', '<b>Second</b> template');

конечно, содержимое шаблонов может исходить от $http звоните:

$http.get('third.html', {cache:$templateCache});

вот планкер техник:http://plnkr.co/edit/J6Y2dc?p=preview


Если вы используете Grunt для создания своего проекта, есть плагин, который автоматически соберет ваши частичные в угловой модуль, который простые $templateCache. Вы можете объединить этот модуль с остальной частью вашего кода и загрузить все из одного файла при запуске.

https://npmjs.org/package/grunt-html2js


добавьте задачу сборки для объединения и регистрации HTML-частичных в Angular $templateCache. (этот ответ является более подробным вариантом karlgold по.)

на грунт используйте грунт-угловые-шаблоны. Для залпом используйте глоток-угловой-templatecache.

Ниже приведены фрагменты конфигурации / кода для иллюстрации.

gruntfile.Яш Пример:

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'));
    });

шаблоны.js (этот файл автоматически генерируется задачей сборки)

$templateCache.put('app/views/main.html', "<div class=\"main\">\r"...

.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>

объединить все шаблоны в 1 большой файл. При использовании Visual Studio 2013 загрузите Web essentials-он добавляет меню правой кнопки мыши для создания пакета HTML.

добавьте код, который этот парень написал, чтобы изменить угловой $templatecache сервис - это всего лишь небольшой фрагмент кода, и он работает:суть Войта Джины

его $http.get это должно быть изменено, чтобы использовать ваш комплект файл:

allTplPromise = $http.get('templates/templateBundle.min.html').then(

маршруты templateUrl должен выглядеть так:

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );

Если вы используете rails, вы можете использовать конвейер активов для компиляции и засунуть все шаблоны haml/erb в модуль шаблона, который может быть добавлен к вашему приложению.файл js. Проверка http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading


Я просто использовать eco чтобы сделать работу за меня. eco поддерживается звездочками по умолчанию. Это сокращение для встроенного Coffeescript, который принимает файл eco и компилируется в файл шаблона Javascript, и файл будет рассматриваться как любые другие файлы js, которые у вас есть в папке assets.

все, что вам нужно сделать, это создать шаблон с расширением .jst.eco и напишите там html-код, и rails автоматически скомпилирует и будет обслуживать файл с конвейером активов, и способ доступа к шаблону очень прост:JST['path/to/file']({var: value}); здесь path/to/file основан на логическом пути, поэтому, если у вас есть файл в /assets/javascript/path/file.jst.eco, вы можете получить доступ к шаблону в JST['path/file']()

чтобы заставить его работать с angularjs, вы можете передать его в атрибут шаблона вместо templateDir, и он начнет работать волшебным образом!


вы можете передать $state контроллеру, а затем, когда страница загружается и вызывает геттер в контроллере, вы вызываете $state.go ('index') или любой частичный, который вы хотите загрузить. Сделанный.


другой метод-использовать HTML5 в Кэш Приложения чтобы загрузить все файлы один раз и сохранить их в кэше браузера. Приведенная выше ссылка содержит гораздо больше информации. Следующая информация из статьи:

изменить <html> тег для включения :

<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

после приложение находится в автономном режиме она остается в кэше, пока не произойдет одно из следующих событий:

  1. пользователь очищает хранилище данных своего браузера для вашего сайта.
  2. файл манифеста изменен. Примечание: обновление файла, указанного в манифест не означает, что браузер будет повторно кэшировать этот ресурс. Этот сам файл манифеста должен быть изменен.