CODEWITHSUNDEEP
angularjs
Baba Zannah
Baba Zannah

Reputation: 336

AngularJS failing to load module

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.

Upvotes: 0

Views: 374

Answers (2)

lhavCoder
lhavCoder

Reputation: 961

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>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

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>

Upvotes: 1

Related Questions