CODEWITHSUNDEEP
htmlangularjs
AnonDCX
AnonDCX

Reputation: 2597

AngularJS dependency injection $injector:modulerr error

Im learning AngularJS and am playing around with dependency injections and interpolation.

I get the following two errors in dev tools in chrome:

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.

Uncaught SyntaxError: Unexpected token ( on line9 app.js

So referring to the first error it clearly states that it cant find the module, I know I have corectly written it and have declared the module in index.html with data-ng-app="myApp"(i like to make sure I am html compliant so I use the data prefix) and it is clearly not mispelled when referenced in the html markup.

Here is app.js:

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

myApp.controller("mainController", ['$scope', '$filter', function($scope, $filter){
   $scope.handle = '';
   $scope.lowercasehandle = function(){
      return $filter.('lowercase')($scope.handle);
   };
}]);

And index.html:

<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
    <script src="//code.angularjs.org/1.5.0-rc.0/angular.js"></script>
    <script src="app.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div data-ng-controller="mainController">
    <label>What is your twitter handle? </label>
    <input type="text" data-ng-model="handle"/>
    <br/>
    <h1>twitter.com/{{ lowercasehandle() }}</h1>
</div>
</body>
</html>

As you can see from the html markup I have referenced 'myApp' module in the top html tag.

As for the second error with the 'unexpected token (' which is referring to this line return $filter.('lowercase')($scope.handle); I dont see anything that is invalid.

I know I am missing something but I cant see where

Upvotes: 1

Views: 386

Answers (4)

Abdelrahman M. Allam
Abdelrahman M. Allam

Reputation: 922

you have noticed this error Uncaught SyntaxError: Unexpected token ( on line9 app.js

this error related to filter.('lowercase') will be filter('lowercase')

Upvotes: 1

Ram Mourya
Ram Mourya

Reputation: 2548

As per angular documentation here ,

we define a module as follows:

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

and to define a controller for the module myApp , you should use it as

var app = angular.module("myApp");
app.controller("mainController", ['$scope', '$filter', function($scope, $filter){
$scope.handle = '';
$scope.lowercasehandle = function(){
  return $filter('lowercase')($scope.handle);
};
}]);

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

please check this one.

$scope.lowercasehandle = function(){
      return $filter('lowercase')($scope.handle);
   };

Upvotes: 1

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Convert this 

$filter.('lowercase')($scope.handle);

to this

$filter('lowercase')($scope.handle);

Upvotes: 1

Related Questions