Uncaught Error: [$injector:modulerr] but not ng-route

Question

I have looked at several questions on this already and for the life of me, I can't figure this one out. I'm not using ng-route and I'm certain its getting the file I'm trying to learn some basic js, so I have been doing a couple of tutorials. One is throwing this error:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.10/$injector/modulerr?p0=gemStore&p1=Error%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.10%2Fangular.min.js%3A17%3A350)

EDITED

Here's my code: HTML

//index.html <!doctype html> <html ng-app="gemStore"> <head> <title>myTestApp</title> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> <script type="text/javascript" src="app.js" /> </head> <body ng-controller="StoreController as store"> <div ng-repeat="product in store.products" ng-hide="store.product.soldOut"> <h1>{{store.product.name}}</h1> <h1>{{store.product.price}}</h1> <h1>{{store.product.desc}}</h1> <button ng-show="store.product.canPurchase">Add To Cart</button> </div> </body> </html>

Javascript:

 var app = angular.module('gemStore', []); app.controller('StoreController', function() { this.products = gems; }); var gems = [ { name: 'Gem', price: 2.95, desc: '. . .', canPurchase = false, soldOut = true, }, { name: 'Gem2', price: 3.95, desc: '. . .', canPurchase = false, soldOut = true, } ]

Why are you using an IIFE? It's unnecessary and the syntax is wrong. You're missing the actual call with () — Maria Ines Parnisari
– Maria Ines Parnisari, Commented Mar 25, 2016 at 0:23
Also, you have a syntax error in your html. The ng-repeat attribute in your div — Maria Ines Parnisari
– Maria Ines Parnisari, Commented Mar 25, 2016 at 0:24
Sorry, its probably an old tutorial. Thank you for catching the syntax error. The error is still there though, so I must have made another mistake. — Speed
– Speed, Commented Mar 25, 2016 at 0:33
Where is it that im missing the ()? Sorry, like I said, I'm just trying to learn. — Speed
– Speed, Commented Mar 25, 2016 at 0:34

HenryDev · Accepted Answer · 2016-03-25 01:09:54Z

This should get you pretty close. Hope it helps :)

<html ng-app="gemStore"> <head> <title>Angular JS</title> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> </head> <body> <div ng-controller="StoreController"> <h1> {{products.name}} </h1> <h1> {{products.price}} </h1> <h1> {{products.desc}} </h1> </div> <script type="text/javascript" src="app.js"></script> </body> </html>

app.js

(function () { var app = angular.module("gemStore", []); app.controller('StoreController', ['$scope', function($scope) { $scope.products = gem; }]); var gem = { name:'New Product', price:'2.95', desc: '...' } })();

@Speed it's always good practice to declare app.js right before the end of the body tag in the html file
Thank you for the answer. mparnisari got me working in a chat. I'll keep your tips in mind as well.
@Speed You're welcome! can you at least vote my question up :)?
@mparnisari take a look at your products array... you don't need the comma at the end of your last key and value -> "soldOut: false,". I just thought I should point that out. Happy coding :)

Maria Ines Parnisari · Accepted Answer · 2016-03-26 04:53:54Z

A couple of errors/suggestions:

I don't know if the div ng-controller="StoreController as store" syntax is correct or not, but it's not necessary. You can just write div ng-controller="StoreController"
You need to have at least one product with soldOut = true in order to see something :)
There was an error in the way you declared your gems. The correct way to declare an object literal is var gem = {soldOut: true}, not var gem = {soldOut = true}.
You don't need to wrap your Angular code with an IIFE. (An IIFE is what you wrote with (function() {....})();)
Angular controllers expose methods and objects through the $scope dependency (which you need to inject BTW). If you declare a var inside your controller and then try to access it in your HTML, you won't be able to.
(EDITED) Take a look at your products array. You don't need the comma at the end of your last key and value -> soldOut: false,.

Working code is here: http://plnkr.co/edit/s2397TznhGii84vwSIFA?p=preview

THanks for spending the time to walk through this with me and help me understand. I want to understand the code, not just get it work. Thanks for the help.

Collectives™ on Stack Overflow

Uncaught Error: [$injector:modulerr] but not ng-route

2 Answers 2

5 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Related