Keep getting injection modulerr error on AngularJS

Question

I use the following code to create an angular app, using routes and controllers.

(function() {
    angular.module('eCommerceApp', ['ngRoute'])
        .config('$routeProvider', function($routeProvider) {
            $routeProvider.
                when('/', {
                    templateUrl: 'partials/phonelist.html',
                    controller: 'mobilePhoneListController'
                }).
                when('/phone/:phoneSlug', {
                    templateUrl: 'partials/phonedetail.html',
                    controller: 'mobilePhoneDetailController'
                }).
                otherwise({
                    templateUrl: 'error/404.html',
                });
        })
        .controller('mobilePhoneListController', ['$http', function($http) {
            var thisObj = this;
            thisObj.mobilePhones = [];

            $http.get('/api/getallphones').then( function(data) {
                thisObj.mobilePhones = data;
            }, function(data) {
                thisObj.mobilePhones = data || "Request Data Fail!";
            });
        }])
        .controller('mobilePhoneDetailController', ['$http', function($http) {
            var thisObj = this;
        }])
})();

Before that I imported 3 scripts. Angular, angular-route and my app

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="/angular/e-commerce-app.js"></script>

and the website main structure

<html lang="en" ng-app="eCommerceApp">
<!-- ... -->
<body ng-view>
</body>
</html>

also tried with <ng-view></ng-view>

But I always seam to get this error.

Error: $injector:modulerr Module Error Failed to instantiate module eCommerceApp due to: Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=fn&p1=not%20... at Error (native) at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416 ...

Mohammad Umair Khan · Accepted Answer · 2015-12-19 10:06:27Z

1

In your website main structure (index.html), use ng-app="eCommerceApp" as an attribute in 'body' tag. For example:

<body ng-app="eCommerceApp">

edited Dec 19, 2015 at 10:06

answered Dec 19, 2015 at 10:03

Mohammad Umair Khan

4206 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Toza Over a year ago

sorry, I forgot to put that in, but I already have ng-app in html, I'll edit now. The app worked all until I implemented routes.

Mohammad Umair Khan Over a year ago

This question is answered in this post. Check it. Might be useful for you. Thanks stackoverflow.com/questions/20363020/…

Toza Over a year ago

Nah, I figured it out, I'll leave an answer in case someone runs into this problem as well.

Toza · Accepted Answer · 2015-12-19 10:17:23Z

0

The problem was that I didn't include the .config file right. I implemented it using

.config('$routeProvider', function($routeProvider) { ... });

while it should've been

.config(['$routeProvider', function($routeProvider) { ... }]);

(notice the [])

answered Dec 19, 2015 at 10:17

Toza

1,3582 gold badges14 silver badges35 bronze badges

Collectives™ on Stack Overflow

Keep getting injection modulerr error on AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related