Corner page load time

Question

I am new to angularjs. I wrote a simple site code. Here I upload the entire controller to the index.php index home page.

<script src="app/components/productController.js"></script> 
<script src="app/components/categoryController.js"></script>
<script src="app/components/offersController.js" ></script>
<script src="app/components/CheckController.js"></script>
<script src="app/components/orderController.js"></script>

Download time is longer. Is there a way to load this controller only when a specific HTML page is called? I tried to embed the suggestions of controlller in offer.htmlIts not working !! How can I handle this?

Answer 1

You can use ocLazyLoad . All you have to do is configure which page will use the files ...

If you use ui.router , lazyLoad works fine with it, here is an example of uploading files to a certain state ...

$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('js/AppCtrl.js');
    }]
  }
});

ocLazyLoad documantation, , AppCtrl.js , , .

, , , , ocLazyLoad...

Answer 2

ng-include . reslove angular. $controllerProvider script.

• , ng-include.

• $controllerProvider .config. .config. :

  var myApp = angular.module('myApp', []).config(function($controllerProvider){
      myApp.controllerProvider = $controllerProvider
  });
  

  myApp controllerProvider, $controllerProvider. - .

• script (offer.html ). :

      myApp.controllerProvider.register('myController', function($scope) {
          //code
      })