Подтвердить что ты не робот

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

Возможно ли это?

4b9b3361

ОТВЕТЫ

Ответ 1

Да, для этого есть как минимум 2 решения:

Если вы хотите использовать метод (2) для заполнения $templateCache, вы можете сделать это следующим образом:

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

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

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

Вот плункер этих методов: http://plnkr.co/edit/J6Y2dc?p=preview

Ответ 2

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

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

Ответ 3

Добавьте задачу сборки, чтобы объединить и зарегистрировать ваши частичные части html в Angular $templateCache. (Этот ответ является более подробным вариантом ответа karlgold.

Для grunt используйте grunt-angular-templates. Для 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>

Ответ 4

Если вы оберните каждый шаблон тегом script, например:

<script id="about.html" type="text/ng-template">
<div>
    <h3>About</h3>
    This is the About page
    Its cool!
</div>
</script>

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

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

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

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

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

Другим методом является использование 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

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

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