nikhilgupta86 nikhilgupta86 - 6 months ago 143
AngularJS Question

Angular JS Error: $injector:modulerr Module Error

I am creating a service in angular JS and trying to run but it is giving me error as below

Failed to instantiate module myapp due to:
Error: [$injector:nomod] Module 'myapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.5/$injector/nomod?p0=myapp
at file:///D:/Angular/First/lib/angular.js:68:12
at file:///D:/Angular/First/lib/angular.js:2070:17
at ensure (file:///D:/Angular/First/lib/angular.js:1994:38)
at module (file:///D:/Angular/First/lib/angular.js:2068:14)
at file:///D:/Angular/First/lib/angular.js:4564:22
at forEach (file:///D:/Angular/First/lib/angular.js:322:20)
at loadModules (file:///D:/Angular/First/lib/angular.js:4548:5)
at createInjector (file:///D:/Angular/First/lib/angular.js:4470:19)
at doBootstrap (file:///D:/Angular/First/lib/angular.js:1746:20)
at bootstrap (file:///D:/Angular/First/lib/angular.js:1767:12


I have shared the js and the html file below, please see. It is very weird i have tried to create a new js and html but same error.

"use strict";

angular.module('myapp', []);

angular.module('myapp').controller('MainController', ['$scope', function($scope) {

$scope.message = 'Hello';

$scope.sayHello = function(name){
return $scope.message + ' ' + name;
};

}]);

angular.module('myapp').controller('IntController', ['$scope', '$interval', function($scope, $interval){

var items = ['bananas', 'apples', 'pears', 'mango', 'peeches'];

$scope.itemIndex = null;
$scope.currentItem = '';

$scope.getItem = function(){
$scope.currentItem = items[$scope.itemIndex];
};

$interval(function(){
$scope.itemIndex = Math.round(Math.random() * (items.length - 1));
$scope.getItem();
}, 2000);

}]);

angular.module('myapp').controller('ExpressionController', ['$scope', '$interval', function($scope, $interval){

$scope.randomValue = -999;

$scope.names = ['Nikhil', 'Ankit', 'Yaghwinder'];

$scope.qty = 2;
$scope.cost = 12.7;

$scope.pWidth = 100;

$interval(function(){
$scope.randomValue = Math.round(Math.random() * 100000);
}, 2000);

}]);

angular.module('myapp').controller('ParentController', ['$scope', function($scope){

$scope.object = {
name: 'Nikhil Gupta'
};

}]);

angular.module('myapp').controller('ChildController', ['$scope', function($scope){



}]);

angular.module('myapp').controller('SuperController', ['$scope', function($scope){

$scope.object = {
name: 'Nikhil Gupta'
};

}]);

angular.module('myapp').controller('FirstController', ['$scope', function($scope){

}]);

angular.module('myapp').controller('SecondController', ['$scope', function($scope){

}]);

angular.module('myapp').service('SharedService', fuction($http){
return {name: 'Yaghwinder Bhatti'};
});

angular.module('myapp').controller('SFirstController', ['$scope', 'SharedService', function($scope, SharedService){
$scope.object = SharedService;
}]);

angular.module('myapp').controller('SSecondController', ['$scope', 'SharedService', function($scope, SharedService){
$scope.object = SharedService;
}]);


And The Html file is

<html ng-app="myapp">
<head>
<title>Angular Setup</title>
<script type="text/javascript" src="../lib/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<p>{{ sayHello('Nikhil') }}</p>
</div>
<br></br>
<div ng-controller="IntController">
<!--ng-model is an data way data binding -->
<p><input type="text" ng-model="itemIndex"> <input type="button" value="Get Item" ng-click="getItem()"></p>
<p>Current Item : {{ currentItem }} </p>
</div>
<br></br>
<div ng-controller="ExpressionController">
<p>Standard Bracket Expression</p>
<p>{{ randomValue }}</p>
<p>One Time Bracket Expression</p>
<p>{{ ::randomValue }}</p>
<p>Array Bracket Expression</p>
<p>{{ names[1] }}</p>
<p>operation Bracket Expression</p>
<p>{{ qty * cost }}</p>
<p>Greater than 50000?</p>
<p>{{ randomValue > 50000 }}</p>
<p>Enter Width: <input type="text" ng-model="pWidth"></p>
<p style="background:#ff0000;width:{{pWidth}}px">
This is a Test for the width.
</p>
</div>

<br></br>

<div ng-controller="ParentController">

<input type="text" ng-model="object.name">
<p>This is Parent : {{object.name}}</p>

<div ng-controller="ChildController">

<input type="text" ng-model="object.name">
<p>This is Child : {{object.name}}</p>

</div>

</div>

<div ng-controller="ParentController">

<input type="text" ng-model="object.name">
<p>This is Second Parent : {{object.name}}</p>

</div>

<br></br>

<div ng-controller="SuperController">

<div ng-controller="FirstController">

<input type="text" ng-model="object.name">
<p>This is Child : {{object.name}}</p>

</div>

<div ng-controller="SecondController">

<input type="text" ng-model="object.name">
<p>This is Child : {{object.name}}</p>

</div>

</div>

<br></br>

<div ng-controller="SFirstController">

<input type="text" ng-model="object.name">
<p>This is Child : {{object.name}}</p>

</div>

<div ng-controller="SSecondController">

<input type="text" ng-model="object.name">
<p>This is Child : {{object.name}}</p>

</div>

<br></br>

</body>

</html>


I have angular js version 1.5.x, i tried searching the error on chrome console and found below error but that do not make any sense

app.js:80 Uncaught SyntaxError: missing ) after argument list
Uncaught Error: [$injector:modulerr] Failed to instantiate module myapp due to:
Error: [$injector:nomod] Module 'myapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.5/$injector/nomod?p0=myapp
at file:///D:/Angular/First/lib/angular.js:68:12
at file:///D:/Angular/First/lib/angular.js:2070:17
at ensure (file:///D:/Angular/First/lib/angular.js:1994:38)
at module (file:///D:/Angular/First/lib/angular.js:2068:14)
at file:///D:/Angular/First/lib/angular.js:4564:22
at forEach (file:///D:/Angular/First/lib/angular.js:322:20)
at loadModules (file:///D:/Angular/First/lib/angular.js:4548:5)
at createInjector (file:///D:/Angular/First/lib/angular.js:4470:19)
at doBootstrap (file:///D:/Angular/First/lib/angular.js:1746:20)
at bootstrap (file:///D:/Angular/First/lib/angular.js:1767:12)
http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=myapp&p1=Error%3A%2…p%20(file%3A%2F%2F%2FD%3A%2FAngular%2FFirst%2Flib%2Fangular.js%3A1767%3A12)

Answer

You misspelled the word function here:

angular.module('myapp').service('SharedService', function($http){ //was fuction
    return {name: 'Yaghwinder Bhatti'};
});
Comments