Angular JS: How to load js files in partials

John提出了一个问题:Angular JS: How to load js files in partials,或许与您遇到的问题类似。


To implement lazy loading of controllers in simple way, you have to do the following:

Save $controllerProvider.register (which is the only method to add a controller into already bootstrapped AngularJS app) to variable in your app (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: '/'});


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

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

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

index.html probably remains the same. Check if your process1.js is being loaded (simply using console.log() right in the body of process1.js, not in P1Ctrl controller). If it isn't, include jQuery before Angular:

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

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

For more complex (and prettier) solution, with .js files as dependencies in route definitions, check that article: - it also works with rc.2 and rc.3. Here is plunk implementing described method: