kehinde kehinde - 1 month ago 20
C# Question

Angular JS: Error: $injector:modulerr Module Error

Just new to angularjs and have been finding a way to get an app running. Very simple and straight forward:

Angular controller:

(function () {
'use strict';

angular
.module('myQuotesApp')
.controller('QuotesController', QuotesController);

QuotesController.$inject = ['$scope', 'Quotes'];

function QuotesController($scope, Quotes) {
$scope.quotes = Quotes.query();
}
})();


This is the service class of angularjs

(function () {
'use strict';
var QuotesService = angular.module('QuotesService', '[ngResource]');
QuotesService.factory('Quotes', ['$resource', function ($resource) {
return $resource('/api/quotes/', {}, {
query: { method: 'GET', params: {}, isArray:true }
});
}]);
})();


THis is the html file:

<!DOCTYPE html>
<html ng-app="myQuotesApp">
<head>
<meta charset="utf-8" />
<title>My Quotes App</title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="/app.js"></script>
</head>
<body ng-cloak>
<div ng-controller="QuotesController">
<H2>List of Quotes</H2>
<ul>
<li ng-repeat="quote in quotes">
<p> "{{quote.Content}}" - {{quote.Author}}</p>
</li>
</ul>
</div>
</body>
</html>


The server side model:

public class Quote
{
public int Id { get; set; }
public string Author { get; set; }
public string Comment { get; set; }
}


The server side controller:

public IEnumerable<Quote> Get()
{
return new List<Quote> {
new Quote { Id=1, Author="James John", Comment="This guy is good to work with."},
new Quote { Id=2, Author="Larry Page", Comment="This is one of the best guys in the IT world"},
new Quote { Id=3, Author="Goodwill Adebayo", Comment="It is always good to work with God." }
};
}


Whenever I run the app it displays a blank page. I checked the browser console and I got this error:

angular.js:4640Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myQuotesApp&p1=Erro…http%3A%2F%2Flocalhost%3A60261%2Flib%2Fangular%2Fangular.min.js%3A20%3A390)
jquery-1.9.0.js:1 '//@ sourceURL' and '//@ sourceMappingURL' are deprecated, please use '//# sourceURL=' and '//# sourceMappingURL=' instead.

Win Win
Answer

You are missing few pieces. You'll need to create myQuotesApp module first before using it.

Working Example at Plunker - http://plnkr.co/edit/l3UmoDjjGhaQq0JNjtsF.

(function () {
    'use strict';

    angular
      .module('myQuotesApp', ['ngResource']) // <----
      .controller('QuotesController', QuotesController);

    QuotesController.$inject = ['$scope', 'QuotesService']; 

    function QuotesController($scope, QuotesService) {
        $scope.quotes = QuotesService.query();
    }

    angular
      .module('myQuotesApp')
      .factory('QuotesService', ['$resource', function ($resource) {
        var query = function() {
          return [{Content: "One", Author: "John"}, 
            {Content: "Two", Author: "Eric"}]
        }
        return {
          query: query 
        }
    }]);
})();

How to pull data from Web API

You just need to update QuotesService to use $resource.

(function () {
    'use strict';

    angular
        .module('myQuotesApp', ['ngResource'])
        .controller('QuotesController', QuotesController);

    QuotesController.$inject = ['$scope', 'QuotesService'];

    function QuotesController($scope, QuotesService) {
        $scope.quotes = QuotesService.query();
        console.log($scope.quotes);
    }

    angular
        .module('myQuotesApp')
        .factory('QuotesService', ['$resource', function ($resource) {
            return $resource('/api/quotes/', {}, {
                query: { method: 'GET', params: {}, isArray: true }
            });
        }]);
})();
Comments