$injector err for module in angular when loading from another script file

Question

I'm a newbie to angular, I was working my way through certain tutorials and I encountered the following errors, please help me fix it. I have 2 files, index.html, and script.js, while I'm loading the script.js file it gives me 2 errors: 1.angular is not defined 2.Uncaught Error: [$injector:modulerr] Enclosing my code:

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

app.controller('todoController', ['$scope', function($scope) {
  $scope.list = [{
      name: "Testing",
      completed: true
    },
    {
      name: "test1",
      completed: false
    },
    {
      name: "app wasn't working",
      completed: true
    },
    {
      name: 'testing 2',
      completed: true
    }
  ]
}])

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="todoController">
    <ul style="list-style-type: none;">
      <li ng-repeat="todo in list">
        <input type="checkbox" ng-model="todo.completed"> {{todo.name}}
      </li>
    </ul>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>

</html>

When I try running the above code snippet on the browser, I get the following 2 errors:

1.

Uncaught ReferenceError: angular is not defined

2.

Uncaught Error: [$injector:modulerr] angular.js:88 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A26%3A408%0A%20%20%20%20at%20b%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A25%3A439)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A26%3A182%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A332%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)

Pankaj Parkar · Accepted Answer · 2018-04-10 02:46:11Z

2

You need to load the script.js after angular.js reference is loaded. change your order to below.

<!DOCTYPE html>
<html ng-app="app">

<head>
</head>

<body>
  <div ng-controller="todoController">
    <ul style="list-style-type: none;">
      <li ng-repeat="todo in list">
        <input type="checkbox" ng-model="todo.completed"> {{todo.name}}
      </li>
    </ul>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
 </script>
  <script src="script.js"></script>
</body>
</html>

edited Apr 10, 2018 at 2:46

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Apr 10, 2018 at 2:37

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

T J Over a year ago

Hey, thanks.That worked completely well for me. Was a small thing, which I didn't figure it out.

Collectives™ on Stack Overflow

$injector err for module in angular when loading from another script file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related