AngularJS failing to load module

Question

I have come across a lot of similar issues here on SF and did everything as expected. Yet, I can't seem to get this simple Angular app working. Console throws up this exception

angular.min.js:6 Uncaught Error: [$injector:modulerr]

AngularJS site docs gave some suggestions which I followed. Yet, I still get that same exception. Here is my code.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Dead Simple Proj</title>
  <link rel="stylesheet" href="content/css/styles.css">
  <script scr="app\app.js"></script>
  <script src="app\lib\angular.min.js"></script>
</head>
<body>
  <div ng-controller="GreetingController">
    {{ greeting }}
  </div>
</body>
</html>

I have this in the App.js

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

myApp.controller('GreetingController', function($scope) {
  $scope.greeting = 'Hola!';
});

I double checked file paths and other possibly obvious mistakes, but no joy. I am definitely missing out something here? Thanks.

First angular library file should load

user4870812
– user4870812

2017-04-17 17:16:18 +00:00
Commented Apr 17, 2017 at 17:16 — user4870812
– user4870812, Commented Apr 17, 2017 at 17:16

Sajeetharan · Accepted Answer · 2017-04-17 17:18:26Z

1

Your paths referencing the libraries and the app.js are wrong and in the wrong order . You should load the angular reference first and then the relative js referencing the module.

Change

From

 <script scr="app\app.js"></script>
 <script src="app\lib\angular.min.js"></script>

To

  <script src="app/lib/angular.min.js"></script>
  <script scr="app/app.js"></script>

DEMO

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

myApp.controller('GreetingController', function($scope) {
  $scope.greeting = 'Hola!';
});

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Dead Simple Proj</title>
  <link rel="stylesheet" href="content/css/styles.css">
   <script type=" text/javascript " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
</head>
<body>
  <div ng-controller="GreetingController">
    {{ greeting }}
  </div>
</body>
</html>

edited Apr 17, 2017 at 17:18

answered Apr 17, 2017 at 17:13

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Baba Zannah Over a year ago

Thanks Sajee, I did and still get the same exception.

Sajeetharan Over a year ago

@BabaganaZannah there is no issue with the answer, check if your references are loading . did you check the demo?

lhavCoder · Accepted Answer · 2017-04-17 17:25:49Z

0

I dont think you added your angular files properly. I made a plunker out of your code and it worked. you can cross check with my code.

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

myApp.controller('GreetingController', function($scope) {
  $scope.greeting = 'Hola!';
});

<html ng-app="myApp">

  <head>
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body  ng-controller="GreetingController">
    <h1>Hello {{greeting}}!</h1>
  </body>

</html>

edited Apr 17, 2017 at 17:25

answered Apr 17, 2017 at 17:17

lhavCoder

9615 silver badges7 bronze badges

4 Comments

Baba Zannah Over a year ago

Brilliant. It worked. I replaced my html head with yours. Do you know why is that?

lhavCoder Over a year ago

That means your angular file didn't load properly. Are u sure linked the angular files properly?

Sajeetharan Over a year ago

@BabaganaZannah there is nothing different in this answer!

lhavCoder Over a year ago

yes i do agree that the previous answer provided by @Sajeetharan is the better answer to the question as i dont think you should resort to using the cdn just because the file isnt referenced properly. thanks.

Collectives™ on Stack Overflow

AngularJS failing to load module

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related