Include Javascript file in Angular

Question

I have an Angular app which redirects route to a particular html page. But how to include related javascript with this.

For example if i click red it will load red.html. but i need to load red.js also additionally.

   <script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.html"
    })
    .when("/red", {
        templateUrl : "red.html";
    })
    .when("/green", {
        templateUrl : "green.html"
    })
    .when("/blue", {
        templateUrl : "blue.html"
    });
});
</script>

Which version of angular? the `angularjs` tag is used for Angular 1.x, while the `angular` tag is used for Angular 2+. Read the tag descriptions. — , Mar 15 '19 at 17:06
Found Answer from here: https://stackoverflow.com/questions/20087274/how-can-i-load-javascript-file-along-with-ng-include-template — Karthik SWOT, Mar 16 '19 at 17:04

score -1 · Answer 1 · answered Mar 15 '19 at 17:15

You should use controller property:

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        controller : "MainController"
        templateUrl : "main.html"
    })
    .when("/red", {
        controller : "RedController";
        templateUrl : "red.html";
    })
    .when("/green", {
        controller : "GreenController"
        templateUrl : "green.html"
    })
    .when("/blue", {
        controller : "BlueController"
        templateUrl : "blue.html"
    });
});
</script>
<script src="controllers.js"></script> // add controllers files

controllers.js

angular
  .module('myApp')
  .controller('MainController', function() {
   //your MainController code
});

angular
  .module('myApp')
  .controller('RedController', function() {
   //your RedController code
});

angular
  .module('myApp')
  .controller('GreenController', function() {
   //your GreenController code
});

angular
  .module('myApp')
  .controller('BlueController', function() {
   //your BlueController code
});

I want to include js files. In Controller can't add this line — Karthik SWOT, Mar 16 '19 at 01:17
you should add in in red.html and it will be loaded in same scope of your controller — guijob, Mar 16 '19 at 16:49

Include Javascript file in Angular

1 Answers1