zoukankan      html  css  js  c++  java
  • [AngularJS] Lazy loading Angular modules with ocLazyLoad

    With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading of Angular modules in large applications.

     Simple example:

    angular.module("demo", ["oc.lazyLoad"])
        .controller("AppCtrl", function ($injector, $ocLazyLoad) {
    
            var app = this;
            app.click = function () {
                $ocLazyLoad.load({
                    name: "store",
                    files: [
                        "store.js"
                    ]
                }).then(function () {
                    console.log($injector.get("cart"));
                })
    
            }
        })
    'use strict';
    
    // Declare app level module which depends on filters, and services
    var App = angular.module('app', ['ui.router', 'oc.lazyLoad'])
      .config(function($stateProvider, $locationProvider, $urlRouterProvider, $ocLazyLoadProvider) {
        $urlRouterProvider.otherwise("/");
        $locationProvider.hashPrefix('!');
    
        // You can also load via resolve
        $stateProvider
          .state('index', {
            url: "/", // root route
            views: {
              "lazyLoadView": {
                controller: 'AppCtrl', // This view will use AppCtrl loaded below in the resolve
                templateUrl: 'partials/main.html'
              }
            },
            resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
              loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                // you can lazy load files for an existing module
                return $ocLazyLoad.load({
                  name: 'app',
                  files: ['js/AppCtrl.js']
                });
              }]
            }
          })
          .state('modal', {
            parent: 'index',
            resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
              loadOcModal: ['$ocLazyLoad', '$injector', '$rootScope', function($ocLazyLoad, $injector, $rootScope) {
                // Load 'oc.modal' defined in the config of the provider $ocLazyLoadProvider
                return $ocLazyLoad.load({
                  name: 'oc.modal',
                  files: [
                    'bower_components/bootstrap/dist/css/bootstrap.css', // will use the cached version if you already loaded bootstrap with the button
                    'bower_components/ocModal/dist/css/ocModal.animations.css',
                    'bower_components/ocModal/dist/css/ocModal.light.css',
                    'bower_components/ocModal/dist/ocModal.js',
                    'partials/modal.html'
                  ]
                }).then(function() {
                  $rootScope.bootstrapLoaded = true;
                  // inject the lazy loaded service
                  var $ocModal = $injector.get("$ocModal");
                  $ocModal.open({
                    url: 'modal',
                    cls: 'fade-in'
                  });
                });
              }],
    
              // resolve the sibling state and use the service lazy loaded
              setModalBtn: ['loadOcModal', '$rootScope', '$ocModal', function(loadOcModal, $rootScope, $ocModal) {
                $rootScope.openModal = function() {
                  $ocModal.open({
                    url: 'modal',
                    cls: 'flip-vertical'
                  });
                }
              }]
            }
          });
    
        // Without server side support html5 must be disabled.
        $locationProvider.html5Mode(false);
    
        // We configure ocLazyLoad to use the lib script.js as the async loader
        $ocLazyLoadProvider.config({
          debug: true,
          events: true,
          modules: [{
            name: 'gridModule',
            files: [
              'js/gridModule.js'
            ]
          }]
        });
      });

    lazy loading is more for projects that are huge with many people working on it, and you have tons and tons of files. Instead of concatenating every JavaScript file into a few megabytes loaded up front, it would make more sense to lazy load them.

    But if you're just working on a small project it makes more sense just to concatenate everything and serve up one giant JavaScript file up front. That way you don't have to worry about files failing to load later on and things like that.

    It's really a call on your end you have to make as to whether you need to lazy load or not. Typically I'd say you don't need to and you don't have to but if you're working on a large project and it's a huge load up front then lazy loading is something you should look into.

    Read More: https://github.com/ocombe/ocLazyLoad/blob/master/examples/complexExample/js/app.js

  • 相关阅读:
    BZOJ_3159_决战
    11.19 ~ 11.25训练计划+总结
    BZOJ_1304_[CQOI2009]叶子的染色_树形DP
    BZOJ_1999_[Noip2007]Core树网的核_单调队列+树形DP
    BZOJ_4033_[HAOI2015]树上染色_树形DP
    BZOJ_5338_ [TJOI2018]xor_可持久化trie
    BZOJ_2957_楼房重建_线段树
    BZOJ_3124_[Sdoi2013]直径_树形DP
    BZOJ_4987_Tree_树形DP
    「JOISC 2019 Day2」两个天线(线段树)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4200263.html
Copyright © 2011-2022 走看看