logo
down
shadow

Angular - Lazy loading an entire page from CMS


Angular - Lazy loading an entire page from CMS

By : Cinthia Carolina Cor
Date : November 17 2020, 11:58 AM
seems to work fine A couple of options here:
Have you looked at ngCloak to see if will help you here with the flicker problem? https://docs.angularjs.org/api/ng/directive/ngCloak.
code :


Share : facebook icon twitter icon
Lazy loading Angular views and controllers on page scroll

Lazy loading Angular views and controllers on page scroll


By : Black Panther
Date : March 29 2020, 07:55 AM
To fix this issue In this case it is probably not necessary (or efficient) to lazy load your controllers, but it can be done.
There are many things to tackle here, so I'm going to handle it in sections.
code :
<div class="container">
  <section
    ng-repeat="section in loadedSections"
    ng-include="section+'.html'"
    scroll-load
    scroll-load-from="sections"
    scroll-load-to="loadedSections"
    ng-animate="{enter:'section-animate-enter'}"
  ></section>
</div>
.section-animate-enter {
  -webkit-transition: 1.5s linear all;
    transition: 1.5s linear all;
    opacity: 0;
    left: 100%;
}
.section-animate-enter.section-animate-enter-active {
    opacity: 1;
    left: 0;
}
app.controller('myCtrl', function($scope) {
  $scope.sections = ['top','mid','bottom']; //html files to load (top.html, etc)
  $scope.loadedSections = [$scope.sections[0]]; //loaded html files
});

app.directive('scrollLoad', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var to = scope[attrs.scrollLoadTo]; //$scope.loadedSections
      var from = scope[attrs.scrollLoadFrom]; //$scope.sections

      $window = angular.element(window);
      $window.bind('scroll', function(event) {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
        var scrollPos = scrollTop + document.documentElement.clientHeight;
        var elemBottom = element[0].offsetTop + element.height();
        if (scrollPos >= elemBottom) { //scrolled to bottom of scrollLoad element
          $window.unbind(event); //this listener is no longer needed.
          if (to.length < from.length) { //if there are still elements to load
            //use $apply because we're in the window event context
            scope.$apply(to.push(from[to.length])); //add next section
          }
        }
      });
    }
  };
});
<div class="container">
  <!-- the "lazy" directive will get the controller first, then add ng-include -->
  <section
    ng-repeat="section in loadedSections"
    lazy="section"
    scroll-load
    scroll-load-from="sections"
    scroll-load-to="loadedSections"
    ng-animate="{enter:'section-animate-enter'}"
  ></section>
</div>
var $appControllerProvider; //see below

var app = angular.module('myApp', []);

app.config(function($controllerProvider) {
  $appControllerProvider = $controllerProvider; //cache this so that we can lazy load controllers
});

app.controller('myCtrl', function($scope) {
  $scope.sections = ['top','mid','bottom']; //html files to load (top.html, etc)
  $scope.loadedSections = [$scope.sections[0]]; //loaded html files
});

app.directive('scrollLoad', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var to = scope[attrs.scrollLoadTo]; //$scope.loadedSections
      var from = scope[attrs.scrollLoadFrom]; //$scope.sections

      $window = angular.element(window);
      $window.bind('scroll', function(event) {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
        var scrollPos = scrollTop + document.documentElement.clientHeight;
        var elemBottom = element[0].offsetTop + element.height();
        if (scrollPos >= elemBottom) { //scrolled to bottom of scrollLoad element
          $window.unbind(event); //this listener is no longer needed.
          if (to.length < from.length) { //if there are still elements to load
            //use $apply because we're in the window event context
            scope.$apply(to.push(from[to.length])); //add next section
          }
        }
      });
    }
  };
});

app.factory('myService', function($http, $q) {
  return {
    getController: function(fileName) {
      return $http.get(fileName+'.js').then(function(response) {
        return response.data;
      });
    }
  }
});

app.directive('lazy', function(myService, $compile, $q) {
  /* I store the directive in a variable then return it later
   * so that I can abstract directive logic into other functions below */
  var directiveReturn = {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var loadName = scope.$eval(attrs.lazy);

      //this is straightforward - see the "addScript" function for explanation
      myService.getController(loadName).then(function(js) {
        return addScript(loadName, js, scope);
      }).then(function() {
        //the controller has been lazy loaded into angular
        //now use "ng-include" to lazy load the view.
        var ngInc = angular.element('<span></span>')
          .attr('ng-include', "'"+loadName+".html'")
          .attr('ng-controller', loadName+'Ctrl');
          element.append(ngInc);
          $compile(ngInc)(scope);
      });
    } //link
  }; //directive return

  /*
   * This is the magic.
   */
  var scriptPromises = {};
  function addScript(loadName, js, scope) {
    if (!scriptPromises[loadName]) { //if this controller hasn't already been loaded
      var deferred = $q.defer();
      //cache promise (which caches the controller when resolved)
      scriptPromises[loadName] = deferred.promise;

      //inject controller into a script tag
      var script = document.createElement('script');
      script.src = 'data:text/javascript,' + encodeURI(js);
      script.onload = function() {
        //this is how you lazy load a controller
        $appControllerProvider.register(loadName, window[loadName+'Ctrl']);
        //now that the controller is registered with angular, resolve the promise
        //then, it is safe to add markup that uses this controller with ng-controller
        scope.$apply(deferred.resolve());
      };
      //when this script loads, the controller will be registered and promise is resolved
      document.body.appendChild(script);
      return deferred.promise;
    }
    else { //controller already loaded
      return scriptPromises[loadName]; //use cached controller
    }
  }
  return directiveReturn;
});
Angular 6 Lazy Loading routes navigation on page refresh

Angular 6 Lazy Loading routes navigation on page refresh


By : user1642452
Date : March 29 2020, 07:55 AM
help you fix your problem You should inject the ActivatedRoute or RouterState object to get the active route and select the good option in your select.
Angular Routing : After lazy loading , page is redirecting to default route

Angular Routing : After lazy loading , page is redirecting to default route


By : V Chouhan
Date : March 29 2020, 07:55 AM
it should still fix some issue I think you just mapped your router-outlet in the wrong component - please check that
I have tried your same scenario in stackblitz please have a look
code :
<form class="form-inline my-2 my-lg-0">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" routerLink="/user/login">Login</button>
      <button class="btn btn-secondary my-2 my-sm-0" type="submit" routerLink="/user/register">Register</button>
    </form>

<router-outlet></router-outlet>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes} from '@angular/router';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

const routes: Routes = [
  {
    path:'welcome',
    component:HelloComponent
  },
  {
    path:'user',
    loadChildren:'./modules/lazy/lazy.module#LazyModule'
  },
  {
    path: '', 
    redirectTo: 'welcome', 
    pathMatch: 'full' 
  }

];

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(routes) ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
<form class="form-inline my-2 my-lg-0">
        <button class="btn btn-secondary my-2 my-sm-0" type="button" [routerLink]="['user']">Login</button>
        <button class="btn btn-secondary my-2 my-sm-0" type="button" routerLink="/user/register">Register</button>
      </form>
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }
@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class UserRoutingModule { }
Lazy Loading: How to create a lazy loading html page using jquery

Lazy Loading: How to create a lazy loading html page using jquery


By : Hildi Rowland
Date : March 29 2020, 07:55 AM
I wish this helpful for you I wanted to have a page that load the content only when it reached that section by scrolling, just like what pinterest website was doing.
Lazy Loading An Entire Page Javascript Only

Lazy Loading An Entire Page Javascript Only


By : HarryCheng
Date : March 29 2020, 07:55 AM
Hope that helps First listen to pagescroll Second get scrollbar position Third if scrollbar position >= 95% load data via Ajax
Related Posts Related Posts :
  • clearvalidators not working in angular 6 form control
  • Remove Count Attribute in json data
  • queue up function callbacks
  • How to stop all Soundcloud streams in once?
  • Sliding div onclick left/right
  • RequireJS JQuery shim doesnt work with VS2013
  • What is the Meteor concurrency model?
  • Events on children of contenteditable element
  • Simple jquery not working to print the input value
  • Javascript templating language in reverse
  • Making Pagination in Javascript Scalable (for large # of db results)
  • Performance of Stateless Authentication in SPA and SSO (Single Sign On)
  • Assigning a value for view asynchronously
  • Mocha JS: How to reuse assertions within a spec?
  • Is ember.js stable enough to use in a real world project?
  • jQuery Load() not loading within div
  • encode stream from webCam h264
  • Regex to find pattern, return subpattern
  • Why does this regex to remove empty <p></p> tags from a string fail?
  • Rails: pass data to javascript
  • Quickest way to check if a number is in a set?
  • Phonegap events online/offline not working
  • In HTML5, please explain the meaning of '?' in the statement
  • Form to use AJAX rather than a page refresh but also utilise error handling?
  • JQuery Script looping error
  • different size divs align top left
  • Image fade-in when webpage finishes loading
  • Seeking HTML5 audio element causes delay (breaks sync)
  • How can I read & write data to a new tab in Firefox?
  • jQuery or JS turn all words into italic type
  • iOS css -webkit-transform: scale doesn't offset touch events
  • Populate select list using javascript
  • Can you work out why my .js file doesn't seem to be linking to my html?
  • Make slideToggle effect only one element at a time
  • Output sound using JavaScript
  • What is the analytics.js equivalent of _trackPageview found in ga.js
  • How can I check if a JS file has been included already?
  • hasClass and condition not working
  • EDITED: I'm having issues with a button and its function
  • Importing XML in HTML with javascript
  • Create new function in contentScriptFile in Firefox extension
  • Should I build Node.js from source or download the OS X installer?
  • How to enforce integer sizes in JS? (TypeScript?)
  • How to update the JSON object without deleting old values using javascript
  • Reading a javascript variable containing a string into another file
  • Possible to prevent 403 errors from logging to the web console?
  • Jquery Accordion - Expand and collapse div on hover
  • jquery .hide() function - Hide mobile, Display Desktop
  • Holding password in javascript variable - security implications?
  • JQPlot trouble to render vertical stacked bar and horizontal legend
  • counts days inbetween then add class to those days with nested divs?
  • Marionette.js with Rails (Devise) Authentication
  • javascript anonymous function evaluation idiom
  • Why am I losing the decimal when working this equation in Javascript?
  • Site redirects to index.php after being open while making calls to an API using AJAX
  • How to determine when multiple callbacks are all done
  • How to update Yeoman dependencies?
  • How can I do a /resolve with the Soundcloud Javascript SDK?
  • I'm not able to call a named callback function
  • How to get value of Paragraph element contained in <div> in HTML using JavaScript
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org