In AngularJS how can I load scripts when the View changes?

Question

In AngularJS it has the ability to route a section of the page using ng-view. This is really nice for smaller projects but as projects get larger it does not scale very well due to the inability to load scripts in the script tag. I've seen a few other posts that regard this but I cannot get a solution to work. The only way I can get it to work (I consider it a hack and doesn't work the way I would like it) is if I include all the scripts at the top of the base Index.html.

What I would like is when the view changes to have the Javascript files, in the header of the View being loaded, be loaded at that point since they are going to actually be used at that point and not have to pre-load them at the beginning of the application.

http://plnkr.co/edit/7LMv0j2sAcjigPuW7ryv?p=preview

In the demo project the Index.html calls the console.log command but I cannot get page1 or page2 to call the log command. Any help would be greatly appreciated.

I am using Angular 1.3.0 Beta 11.

score 0 · Answer 1 · answered Jun 16 '14 at 19:17

2 things, in your view you don't have to write <html> or <body> tags, you've already got those on you main page. You should see the view as a part of the main page.

second, to add javascript to your views you add a controller to the view like this:

.config(function ($routeProvider) {
    $routeProvider
      .when('/page1', {
        templateUrl: 'page1.html',
        controller: function ($log) {
          $log.info('page 1');
        }
      })
      .when('/page2', {
        templateUrl: 'page2.html',
        controller: function ($log) {
          $log.info('page 2');
        }
      });
});

it's also possible to add a controller to a view like this:

var app = angular.module('routeApp', ['ngRoute']) 

.config(function ($routeProvider) {
    $routeProvider
      .when('/page1', {
       templateUrl: 'page1.html',
       controller: function ($log) {
          $log.info('page 1');
        }
      })
      .when('/page2', {
           templateUrl: 'page2.html',
           controller: 'ViewController'
      });
});

app.controller('ViewController', function ($log) {
  $log.info('page 2');
})

i updated your plunker: Here

In AngularJS how can I load scripts when the View changes?

1 Answers1