Чи є спосіб зробити 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 завантажувати обидві партії на початку, а не на запит.

Це можливо?

Так, для цього є щонайменше 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-частинки в кутовому $templateCache. ( Ця відповідь є більш детальним варіантом відповіді Карлгольда. )

Для грунту використовуйте шаблони grunt-angular-template . Для 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>

Об'єднайте всі шаблони в 1 великий файл. Якщо ви використовуєте Visual Studio 2013, завантажте необхідні веб-сторінки - це додає меню правої кнопки миші, щоб створити пакет HTML.

Додайте код, який написав цей хлопець, щоб змінити кутовий $templatecacheсервіс - його лише невеликий фрагмент коду, і він працює: Істота Войти Джини

Це те, $http.getщо слід змінити, щоб використовувати ваш файл пакету:

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

Ваші маршрути templateUrlповинні виглядати так:

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

Якщо ви використовуєте рейли, ви можете використовувати конвеєр активів для складання та переміщення всіх шаблонів haml / erb у модуль шаблонів, який можна додати до файлу application.js. Оформити замовлення http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Я просто використовую ecoдля мене роботу. ecoпідтримується зірочками за замовчуванням. Це стенограма для вбудованого Coffeescript, яка бере екологічний файл і компілюється у файл шаблону Javascript, і цей файл буде оброблятися як і будь-який інший js-файл, який у вас у папці активів.

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

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

Ви можете передати $ state своєму контролеру, а потім, коли сторінка завантажується та зателефонує гетеру в контролері, ви викликаєте $ state.go ('індекс') або будь-яку часткову частину, яку ви хочете завантажити. Зроблено.

Інший метод полягає у використанні кеша додатків HTML5 для завантаження всіх файлів один раз та збереження їх у кеші браузера. Наведене вище посилання містить набагато більше інформації. Наступна інформація зі статті:

Змініть <html>тег, щоб він включав manifestатрибут:

<html manifest="http://www.example.com/example.mf">

Файл маніфесту повинен подаватися з mime-type text/cache-manifest.

Простий маніфест виглядає приблизно так:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

Після того, як програма не працює в режимі офлайн, вона залишається кешованою, поки не відбудеться одне з наступних дій:

1. Користувач очищає сховище даних свого веб-переглядача для вашого сайту.
2. Файл маніфесту модифікований. Примітка. Оновлення файлу, переліченого в маніфесті, не означає, що браузер повторно кешує цей ресурс. Сам файл маніфесту повинен бути змінений.