Angular JS: How to load js files in partial

Question

Angular JS: How to load js files in partial

Very new to AngularJS, I guess the term I'm trying to do is lazy workload. I looked through several different blogs and I did not find a complete working solution that uses only AngularJS.

I understand that if I put <script src="js/process1.js"></script> in index.html, everything works fine, I'm trying to reduce the amount of js that gets pulled out at boot time.

With a script tag sitting in partial, it never loads, so P1Ctrl is never created. So at present, if the user enters the application and never goes to process55, the user still has code for process55, although he has never been used.

Is there a way to upload the file and paste the objects created in process1.js into the application, defined mostly during the execution of the process1 route?

index.html

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Large Angular App</title> <link rel="stylesheet" href="lib/foundation/css/foundation.min.css" /> </head> <body ng-app="largeApp" ng-controller="LargeAppController"> <div> <a href="#/home">Home</a> | <a href="#/process1">Process1</a> </div> <br/> <br/> <br/> <ng-view>Test</ng-view> <script type="text/javascript" src="lib/jquery/jquery.min.js"></script> <script type="text/javascript" src="lib/angular/angular.js"></script> <script type="text/javascript" src="lib/angular/angular-route.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>

JS / main.js:

 var app = angular.module("largeApp", ['ngRoute']); var appCtrl = app.controller("LargeAppController", function(){}); app.config(function ($routeProvider, $controllerProvider) { // save references to the providers app.registerCtrl = $controllerProvider.register, $routeProvider.when('/', {templateUrl: 'partials/home.html'}); //Thinking I need to set up a resolve to fire off a script loader to load js. $routeProvider.when('/process1', {templateUrl: 'partials/process1/process1.html'}); $routeProvider.otherwise({redirectTo: '/'}); });

overtones / home.html:

  <div> Home Page </div>

overtones / process1.html:

 <script type="text/javascript" src="js/process1/Process1Controller.js"></script> Process 1 {{process1data}}

JS / process1.js:

 console.log("I made it here"); app.registerCtrl('Process1Controller',function($scope){ $scope.process1data = "Hello!"; } ]);

+46

javascript jquery html angularjs

John 17 Oct '13 at 18:17

source share

1 answer

lort · Accepted Answer · 2013-10-17 19:46

To implement lazy loading of controllers in a simple way, you should do the following:

Save $controllerProvider.register (which is the only way to add a controller to an already loaded AngularJS application) into a variable in your application ( main.js ):

 var app = angular.module('app',["ngRoute"]); app.config(['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) { // remember mentioned function for later use app.registerCtrl = $controllerProvider.register; //your routes $routeProvider.when('/', {templateUrl: 'partials/home.html'}); $routeProvider.when('/process1', {templateUrl: 'partials/process1.html'}); $routeProvider.otherwise({redirectTo: '/'}); } ]);

process1.html

 <script src="js/process1.js"></script> <div ng-controller="P1Ctrl"> {{content}} </div>

And now, in process1.js , you use our registerCtrl :

 app.registerCtrl('P1Ctrl', function($scope) { $scope.content = '...'; });

index.html will probably remain the same. Check if your process1.js (just using console.log() right in the body of process1.js and not in the P1Ctrl controller). If not, enable jQuery before Angular:

 <script src="lib/jquery/jquery.js"></script> <script src="lib/angular/angular.js"></script>

IMPORTANT: This method does not work with angular 1.2.0-rc.2 and 1.2.0-rc.3, because this little jQuery trick does not work.

For a more complex (and more beautiful) solution with .js files as dependencies in the route definitions check this article: http://ify.io/lazy-loading-in-angularjs/ - it also works with rc.2 and rc. 3. The following is an example of using the described method: http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD

Angular JS: How to load js files in partial

More articles: