AngularJS
धीरे लोड हो रहा है

टिप्पणियों

angular.module('lazy', [
 'alreadyLoadedDependency1',
 'alreadyLoadedDependency2',
 ...
 {
  files: [
  'path/to/lazily/loaded/dependency1.js',
  'path/to/lazily/loaded/dependency2.js', //<--- requires lazily loaded dependency1
  'path/to/lazily/loaded/dependency.css'
  ],
  serie: true //Sequential load instead of parallel
 }
]);

आलसी लोडिंग के लिए अपनी परियोजना तैयार करना

अपनी अनुक्रमणिका फ़ाइल में oclazyload.js शामिल करने के बाद, ocLazyLoad में एक निर्भरता के रूप में app.js

//Make sure you put the correct dependency! it is spelled different than the service!
angular.module('app', [
 'oc.lazyLoad',
 'ui-router'
])

प्रयोग

$ocLazyLoad लोड फ़ाइलों के लिए $ocLazyLoad सेवा को एक नियंत्रक या किसी अन्य सेवा में इंजेक्ट करें

.controller('someCtrl', function($ocLazyLoad) {
 $ocLazyLoad.load('path/to/file.js').then(...);
});

कोणीय मॉड्यूल स्वचालित रूप से कोणीय में लोड किया जाएगा।

अन्य भिन्नता:

$ocLazyLoad.load([
  'bower_components/bootstrap/dist/js/bootstrap.js',
  'bower_components/bootstrap/dist/css/bootstrap.css',
  'partials/template1.html'
]);

विविधताओं की पूरी सूची के लिए आधिकारिक दस्तावेज देखें

राउटर के साथ उपयोग

यूआई-रूटर:

.state('profile', {
 url: '/profile',
 controller: 'profileCtrl as vm'
 resolve: {
  module: function($ocLazyLoad) {
   return $ocLazyLoad.load([
    'path/to/profile/module.js',
    'path/to/profile/style.css'
   ]);
  }
 }
});

ngRoute:

.when('/profile', {
     controller: 'profileCtrl as vm'
     resolve: {
      module: function($ocLazyLoad) {
       return $ocLazyLoad.load([
        'path/to/profile/module.js',
        'path/to/profile/style.css'
       ]);
      }
     }
    });

निर्भरता इंजेक्शन का उपयोग करना

निम्नलिखित सिंटैक्स आपको सेवा का उपयोग करते समय स्पष्ट विनिर्देश के बजाय अपने module.js में निर्भरता निर्दिष्ट करने की अनुमति देता है

//lazy_module.js
angular.module('lazy', [
 'alreadyLoadedDependency1',
 'alreadyLoadedDependency2',
 ...
 [
  'path/to/lazily/loaded/dependency.js',
  'path/to/lazily/loaded/dependency.css'
 ]
]);

नोट : यह सिंटैक्स केवल आलसी लोड किए गए मॉड्यूल के लिए काम करेगा!

निर्देश का उपयोग करना

<div oc-lazy-load="['path/to/lazy/loaded/directive.js', 'path/to/lazy/loaded/directive.html']">

<!-- myDirective available here -->
<my-directive></my-directive>

</div>