Czy istnieje sposób, aby AngularJS ładował częściowe na początku, a nie w razie potrzeby?

Mam taką konfigurację trasy:

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

Chcę być w stanie zmusić angularjs do pobrania obu części na początku, a nie na żądanie.

Czy to możliwe?

Tak, istnieją co najmniej 2 rozwiązania tego:

1. Użyj scriptdyrektywy ( http://docs.angularjs.org/api/ng.directive:script ), aby umieścić swoje częściowe w początkowo załadowanym HTML
2. W razie potrzeby możesz również wypełnić $templateCache( http://docs.angularjs.org/api/ng.$templateCache ) z JavaScript (ewentualnie na podstawie wyniku $httpwywołania)

Jeśli chcesz użyć metody (2) do wypełnienia $templateCache, możesz to zrobić w następujący sposób:

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

Oczywiście treść szablonów może pochodzić z $httppołączenia:

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

Oto plunker tych technik: http://plnkr.co/edit/J6Y2dc?p=preview

Jeśli użyjesz Grunta do zbudowania swojego projektu, istnieje wtyczka, która automatycznie połączy twoje częściowe w moduł Angular, który ładuje $ templateCache. Możesz połączyć ten moduł z resztą kodu i załadować wszystko z jednego pliku podczas uruchamiania.

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

Dodaj zadanie kompilacji, aby połączyć i zarejestrować swoje częściowe HTML w Angular $templateCache. ( Ta odpowiedź jest bardziej szczegółowym wariantem odpowiedzi Karlgolda. )

Do chrząkania użyj szablonów chropowatych . W przypadku łyka użyj gulp-angular-templatecache .

Poniżej znajdują się fragmenty konfiguracji / kodu do zilustrowania.

gruntfile.js Przykład:

ngtemplates: {
  app: {                
    src: ['app/partials/**.html', 'app/views/**.html'],
    dest: 'app/scripts/templates.js'
  },
  options: {
    module: 'myModule'
  }
}

gulpfile.js Przykład:

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 (ten plik jest generowany automatycznie przez zadanie kompilacji)

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

Jeśli otoczysz każdy szablon znacznikiem skryptowym, np .:

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

Połącz wszystkie szablony w 1 duży plik. Jeśli korzystasz z programu Visual Studio 2013, pobierz podstawowe informacje o sieci - dodaje menu prawym przyciskiem myszy, aby utworzyć pakiet HTML.

Dodaj kod, który ten facet napisał, aby zmienić $templatecacheusługę kątową - to tylko mały fragment kodu i działa: Gist Vojty Jiny

To $http.getnależy zmienić, aby użyć pliku pakietu:

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

Twoje trasy templateUrlpowinny wyglądać tak:

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

Jeśli używasz szyn, możesz użyć potoku zasobów do skompilowania i przesunięcia wszystkich szablonów haml / erb do modułu szablonów, który można dołączyć do pliku application.js. Zamówienie http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

Po prostu ecorobię to dla siebie. ecojest domyślnie obsługiwany przez Sprockets. Jest to skrót od Embedded Coffeescript, który pobiera plik eco i kompiluje do pliku szablonu JavaScript, a plik będzie traktowany jak każdy inny plik js, który masz w folderze zasobów.

Wszystko, co musisz zrobić, to utworzyć szablon z rozszerzeniem .jst.eco i napisać tam kod HTML, a szyny automatycznie skompilują się i udostępnią plik z potokiem zasobów, a dostęp do szablonu jest naprawdę łatwy: JST['path/to/file']({var: value});gdzie path/to/fileopiera się na ścieżce logicznej, więc jeśli masz plik /assets/javascript/path/file.jst.eco, możesz uzyskać dostęp do szablonu pod adresemJST['path/file']()

Aby działał z angularjs, możesz przekazać go do atrybutu template zamiast templateDir i zacznie on działać magicznie!

Możesz przekazać stan $ do swojego kontrolera, a następnie gdy strona ładuje się i wywołuje getter w kontrolerze, wywołujesz $ state.go („indeks”) lub dowolną część, którą chcesz załadować. Gotowe.

Inną metodą jest użycie pamięci podręcznej aplikacji HTML5 do jednokrotnego pobrania wszystkich plików i zachowania ich w pamięci podręcznej przeglądarki. Powyższy link zawiera znacznie więcej informacji. Z artykułu pochodzą następujące informacje:

Zmień <html>tag, aby zawierał manifestatrybut:

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

Plik manifestu musi zostać podany z typem MIME text/cache-manifest .

Prosty manifest wygląda mniej więcej tak:

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

Gdy aplikacja jest offline, pozostaje w pamięci podręcznej, dopóki nie zdarzy się jedna z poniższych sytuacji:

1. Użytkownik usuwa dane z przeglądarki w Twojej witrynie.
2. Plik manifestu został zmodyfikowany. Uwaga: aktualizacja pliku wymienionego w manifeście nie oznacza, że ​​przeglądarka ponownie buforuje ten zasób. Sam plik manifestu musi zostać zmieniony.