Как работает prerender?

Ресурсы на стороне сервера оказываются скудными, на самом деле я не мог найти ничего, что бы четко объясняло, как все работает. Я видел некоторые репозитории, пытался следовать коду, но не смог понять суть этого. Если я обычно запускаю angular, я знаю, что происходит:

  • Загружается файл HTML: <html><body><my-app>...</my-app><SCRIPTS/></body></html>
  • Сценарии загружаются...
  • Angular обрабатывает код и заменяет <my-app> всеми лакомствами внутри.

Для этого приложения:

@Component({
  selector: 'my-app'
  template: `<p *ngFor="let i of items">{{ i }}</p>`,
})
export class AppComponent {
  items = [1, 2, 3];
}

Я могу увидеть html (plunker) и посмотреть:

<my-app>
  <!--template bindings={
    "ng-reflect-ng-for-of": "1,2,3"
  }-->
  <p>1</p>
  <p>2</p>
  <p>3</p>
</my-app>

Все ясно до сих пор! (

Но что происходит с prerender? Если я создам такой файл:

<html>
<body>
  <my-app>
    <!--template bindings={
        "ng-reflect-ng-for-of": "1,2,3"
      }-->
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </my-app>
  <SCRIPTS/>
</body>
</html>

Что выполнит angular после загрузки сценариев? Могу ли я использовать этот html вместо первого? Если кто-то понимает, как этот процесс работает, пожалуйста, поделитесь (Любая информация об этом материале будет полезна... Могу ли я Скопировать outerHTML и сделать так, чтобы моя "предварительная страница"?... это:

Копировать outerHTML

Если нет, то почему? Я ищу суть процесса, пример, который можно закодировать вручную и работать...

Ответы

Ответ 1

При рендеринге на стороне сервера страница будет отображаться дважды: на сервере, поэтому вы можете увидеть рендерное представление очень рано, а затем на клиенте - после загрузки приложения.

  • На стороне сервера вы используете angular -universal для отображения любого вида вашего приложения с указанием URL-адреса маршрута;
  • На клиенте ваше приложение загружается как обычно - визуализируемое клиентом представление помещается в корневой тег приложения, а заменяет визуализированный сервер. Единственная магия, которая происходит на стороне клиента, заключается в переносе состояния на клиентское приложение с помощью preboot.js модуля универсального проекта, который выполняется путем записи событий, инициированных на рендеринг сервера, а затем повторное воспроизведение их на визуализированном клиенте представлении после загрузки приложения. Итак, если вы введете что-то в поле input до того, как приложение будет загружено, нажатия клавиш будут воспроизведены командой preboot.complete() после того, как визуализированное представление клиента заменяет обработанную сервером.

Ваши вопросы:

Что будет делать Angular после загрузки сценариев?

Ваше приложение загружается нормально, содержимое тега <my-app></my-app> заменяется визуализированным клиентом представлением.

Могу ли я скопировать outerHTML и сделать эту "предварительную страницу"?

Да. Однако предпочтительнее использовать модуль angular-universal, поэтому вы можете динамически отображать представление позади любого из ваших маршрутов.

Что касается образца, вот Angular 2 Universal Starter, который является образцовым приложением, которое демонстрирует универсальную вещь в действии, Играйте с ним:

  • измените строку 'This was rendered from the server!' в dist/server/index.js, чтобы увидеть, что она вернулась назад, когда приложение загружено. Это означает, что оператор становится ложью после визуализации представления клиента.

  • включить preboot и отложить preboot.complete(), чтобы увидеть его в действии (введите что-то в поле input):

    SRC/main.node.ts

    let config: ExpressEngineConfig = {
    // ...
    preboot: { appRoot: 'app' } // your top level app component selector
};

    SRC/client.ts

    ngApp()
.then(function() {
  setTimeout(function() {
    preboot.complete();
  }, 5000);
});

Вот простой DEMO статически поданный "предварительно визуализированный" вид с предварительной загрузкой на клиенте. Задержка в 5 секунд до того, как app загрузится, чтобы увидеть предзагрузку в действии.

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

Ответ 2

Думаю, вам нужно использовать angular2-universal-preview для рендеринга приложения на стороне сервера:

    import * as express from 'express';
    import {ng2engine} from 'angular2-universal-preview';

    // Angular 2
    import {App} from './src/app';

    let app = express();

    // Express View
    app.engine('.ng2.html', ng2engine);
    app.set('views', __dirname);
    app.set('view engine', 'ng2.html');


    // static files
    app.use(express.static(__dirname));


    app.use('/', (req, res) => {
      res.render('index', { App });
    });



    app.listen(3000, () => {
      console.log('Listen on http://localhost:3000');
    });`