CODEWITHSUNDEEP
javascriptangularjsajax
Toza
Toza

Reputation: 1358

Keep getting injection modulerr error on AngularJS

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 ...

Upvotes: 0

Views: 138

Answers (2)

Toza
Toza

Reputation: 1358

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 [])

Upvotes: 0

Mohammad Umair Khan
Mohammad Umair Khan

Reputation: 410

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

<body ng-app="eCommerceApp">

Upvotes: 1

Related Questions