4

I am new to angularjs. I have written a simple website code. Here im am loading all the controller in the index.php main index page itself.

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

The load time is more. Is there any way I can load these controller only when I call the particular HTML page? I have tried to embedded the offerscontrolller in offer.html Its not working!! How can I handle this?

1
  • Use ocLazyLoad or requireJs to optimize performance Aug 7, 2017 at 7:59

2 Answers 2

2

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

If you are using ui.router, lazyLoad working great with it here is an example to load files on specific 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');
    }]
  }
});

this example is taken from ocLazyLoad documantation, as you see you will load AppCtrl.js only on this state and you can imagine that you can load any files only in needed state.

Think about you are using very large chart library only in one page so all you have to do is add it in your state resolve with ocLazyLoad...

7
  • is there any other library ? Im getting Uncaught Error: [$injector:modulerr] error while importing this library!
    – TorreZz
    Dec 10, 2015 at 11:20
  • I don't know any other library but it seems injection error, so it shouldnt be relatated with ocLazyLoad... Check your code again please... Dec 10, 2015 at 11:22
  • resolved the error . Is the same code can be used for route provideR?
    – TorreZz
    Dec 10, 2015 at 12:00
  • the controller file is loading correctly. But the contents are not fetched?
    – TorreZz
    Dec 10, 2015 at 12:28
  • Can i use this library in ngrouter?
    – TorreZz
    Dec 11, 2015 at 7:55
1

You can use ng-include to dynamically load modules. Also you can use reslove in angular routing alternatively. you need to register your controller with $controllerProvider when the dynamic script is loaded.

  1. Please see how you can load a template using ng-include.

  2. You don't have access to $controllerProvider outside the module .config. So get the reference to it through .config. Here is how:

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

    Here myApp is a global object and it has controllerProvider property which points to your $controllerProvider. So far - so good.

  3. Include your controller and the registration inside a script tag in your template (offer.html in your case). Here it is:

        myApp.controllerProvider.register('myController', function($scope) {
            //code
        })
    
3
  • It works in all the cases where you need to load templates and controllers dynamically.
    – Charlie
    Dec 10, 2015 at 12:59
  • where should i include this app.controllerprovider.register?
    – TorreZz
    Dec 11, 2015 at 6:45
  • Include it inside a <script> tag in your template.
    – Charlie
    Dec 11, 2015 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.