angularjs - 在服务器端渲染初始 Angular ng-view 并从那里获取

Question

我想避免初始 JavaScript 渲染 View 的显示延迟。我希望用户立即看到内容并让 Angular 从那里获取它。我不想在 Angular ngRoute 启动时替换这个 ng-view，因为可能会发生眨眼。我只希望它在用户到达另一条路线时替换它。

假设这是基本路线 '/' .这已经存在于我的 HTML 中，从服务器呈现。

<div ng-view>
<h1>Welcome. I am the first view.</h1>
<p>Please do not replace me until a user has triggered another route.</p>
</div>

我知道一种常见的方法是在 ng-view 中包含一些服务器端代码。当 Angular 加载时，它只是替换它。这不是我想要做的。我希望 Angular 加载并理解这实际上已经是我的第一个 View 。

关于如何做到这一点的任何创意？我看过源代码 - 没有运气。甚至可能是一种让 Angular 仅在 HTML 不同时替换 HTML 的方法。

编辑:
我不希望在服务器端渲染模板以用作 Angular 模板。我想渲染我的整个 index.html在服务器端，这已经包含了用户需要查看的初始基本路由的所有内容。

Answer 1

在任何手机上 6-10 秒都非常糟糕。我不会在这里责怪 angular，angular 只有 30kb，如果这仍然太慢，你选择了错误的任务框架。

使用分析工具来了解发生了什么。

您正在处理的应用程序有多大？

您可以将应用程序拆分为子应用程序吗？

您是否已经在为 CSS 和 JS 进行缩小？

你懒惰加载所有的 View 和 Controller 吗？

你在压缩一切吗？ (gzip)

无论如何，可以在服务器端为您的 index.html 进行预处理

例如，您可以使用 nodejs 进行预处理，并缓存预处理后的 index.html。

你的 nodejs 预处理器可以做(伪代码):

function preprocessIndexHtml(queryString) {
   if(cached[queryString])) return cached[queryString];

   // assume angular.js is loaded
   // routeConfiguration is an object that holds controller & url.
   var routeConfiguration = $routeProvider.
       figureOutRouteConfigurationFor(queryString);

  var domTree = $(file('index.html'));
  var $rootScope = $injector.get('$rootScope');

  // find ng-view and clone it
  var yourNgView = $($("attribute[ng-view='']").outerHTML);

  // le's get rid of existing ng-view attribute
  // and configure new ng-view with templateUrl & controller.
  yourNgView.RemoveNgViewAttribute();
  yourNgView.AddAttribute("ng-controller", routeConfiguration.controller);
  yourNgView.AddAttribute("ng-view", routeConfiguration.templateUrl);

  // compile the view & pass the rootScope.
  $compile(yourNgView)($rootScope);

  // replace the existing dom element with our compiled variant
  $("attribute[ng-view='']").replaceHtmlWith(yourNgView);

  // we can now cache the resulted html.
  return cached[queryString] = domTree.html;
}