CODEWITHSUNDEEP
javascriptangularjsnode.js
pkerckhove
pkerckhove

Reputation: 823

Error: $injector:modulerr Module Error / Angular service

I'm new to angular and I'm having this issue : 

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=serviceApp&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A22%3A179)
at angular.js:38
at angular.js:4920
at q (angular.js:403)
at g (angular.js:4880)
at eb (angular.js:4802)
at c (angular.js:1914)
at Sc (angular.js:1935)
at ue (angular.js:1820)
at angular.js:33367
at HTMLDocument.b (angular.js:3431)

I have a simple js and html file, I'm trying to manipulate objects and arrays. I just want to console.log what I want so I can see where I'm going. Here is my html :

<!DOCTYPE html>
<html ng-app="serviceApp">
   <body>
    <div ng-controller="indexCtrl">
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="services.js"></script>
   </body>
<html>

and this is my service with my functions

let rankingModule = angular.module('rankingModule', []);

let rankingsProm = [
   {
  position: 1,
  user: 323232,
  score: 100
   }, {
  position: 2,
  user: 1213232,
  score: 89
 }
];

let usersProm = [
 {
  id: 1313232,
  firstName: 'John',
  lastName: 'Doe'
 },
];


rankingModule.service('indexCtrl', function ($q, $http) {
 $q.all([rankingsProm, usersProm]).then(function (responses) {
   //$q returns an array of promises
   console.log(responses)
   console.log(mergeRankingWithUsers(responses[0], responses[1]))
 })

  function mergeRankingWithUsers (rankings, users) {
   let merged = rankings.map(function (ranking) {
    let index = users.findIndex(function (user) { return user.id === ranking.user; });
    ranking.firstName = index > -1 ? users[index].firstName : 'unknown';
    ranking.lastName = index > -1 ? users[index].lastName : 'unknown';
  return ranking;
  })
  return merged;
 }
})

Upvotes: 0

Views: 888

Answers (3)

Keshav Dhawan
Keshav Dhawan

Reputation: 39

Avoid using global variables to store your angular modules. It is considered as a bad practice as this may conflict with other modules.

For example:

Straightaway, use: angular.module('rankingModule' , []);

In controller: angular.module('rankingModule').controller...

In service: angular.module('rankingModule').service...

In your case name of the global variable is specific but in many cases you may name your variable too generic that it might get overridden by any library.

Upvotes: 1

anoop
anoop

Reputation: 3822

you need to correct below points:

  1. Refer correct module <html ng-app="rankingModule">
  2. Correct your controller registration, as you referred indexCtrl as controller in HTML <div ng-controller="indexCtrl">

So register it as controller : rankingModule.controller('indexCtrl', function ($q, $http) {..\\

Upvotes: 3

Sajeetharan
Sajeetharan

Reputation: 222522

You are refering to wrong module using ng-app, It should be,

<html ng-app="rankingModule">

Upvotes: 3

Related Questions