All geek questions in one place

Move the initial Angular ng-view on the server side and take it from there

I want to avoid delays in displaying the original views processed by JavaScript. I want the user to immediately see the content and Angular takes it from there. I do not want to just replace this ng-view when Angular ngRoute is triggered, as this can happen. I just want it to replace it when the user dialed another route.

Suppose this is a basic route '/'. This would already be in my HTML displayed from the server.

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

I know that the general approach is to have some server-side code in ng-view, and when loading Angular it just replaces it. This is not what I am looking for. I want Angular to download and understand that this is actually my first submission.

Any creative ideas on how to do this? I looked at the source code - no luck. Perhaps there is even a way to have Angular replace HTML only if it is different.

Edit: I do not want to display server-side templates for use as Angular templates. I am looking to display all of mine index.htmlon the server side, and this will already contain everything that the user should see for this initial base route.

+4
source share
2 answers

6-10 . angular , angular - 30 , , .

, , .

  • , ?
  • -?
  • minification CSS JS?
  • ?
  • ? (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 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;
}
-1

Source: https://habr.com/ru/post/1599645/

More articles:


All Articles