I keep getting this error:
angular.js:38 Uncaught Error: [$injector:modulerr] .6.4/$injector/modulerr?p0=sport1Feed&p1=Error…ogleapis%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A22%3A179)
at angular.js:38
at angular.js:4920
at q (angular.js:403)
at g (angular.js:4880)
at eb (angular.js:4802)
at c (angular.js:1914)
at Sc (angular.js:1935)
at ue (angular.js:1820)
at angular.js:33367
at HTMLDocument.b (angular.js:3431)
My app is defined and invoked in html, same as my controller. What am I doing wrong here?
app.js:
var app = angular.module('testApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap','ui.router']);
ctrl.js:
app.controller('feedCtrl', function($scope, $http) {
$http.get('').then(function(res) {
$scope.res = res.data;
console.log($scope.res);
});
});
html:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css">
<script src=".6.4/angular.min.js"></script>
<script src="./ponents/app/app.js"></script>
<script src=".1.1/angular-material.min.js"></script>
<script src=".0.3/angular-ui-router.min.js"></script>
<script src=".6.4/angular-sanitize.min.js"></script>
<script src=".2.0/xml2json.js"></script>
<script src="./ponents/controller/ctrl.js"></script>
</head>
<body>
<div data-ng-controller="feedCtrl">
</div>
</body>
</html>
What exactly is an error here? I have tried placing ng-app in the body tags, same result. As you can see, app.js is invoked after the angular library.
Thanks.
EDIT: I have just noticed in the console, under Network that the request to the is not being invoked at all.
I keep getting this error:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs/1.6.4/$injector/modulerr?p0=sport1Feed&p1=Error…ogleapis.%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A22%3A179)
at angular.js:38
at angular.js:4920
at q (angular.js:403)
at g (angular.js:4880)
at eb (angular.js:4802)
at c (angular.js:1914)
at Sc (angular.js:1935)
at ue (angular.js:1820)
at angular.js:33367
at HTMLDocument.b (angular.js:3431)
My app is defined and invoked in html, same as my controller. What am I doing wrong here?
app.js:
var app = angular.module('testApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap','ui.router']);
ctrl.js:
app.controller('feedCtrl', function($scope, $http) {
$http.get('https://api.myjson./bins/13vg19').then(function(res) {
$scope.res = res.data;
console.log($scope.res);
});
});
html:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css">
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="./ponents/app/app.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/angular-sanitize/1.6.4/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/x2js/1.2.0/xml2json.js"></script>
<script src="./ponents/controller/ctrl.js"></script>
</head>
<body>
<div data-ng-controller="feedCtrl">
</div>
</body>
</html>
What exactly is an error here? I have tried placing ng-app in the body tags, same result. As you can see, app.js is invoked after the angular library.
Thanks.
EDIT: I have just noticed in the console, under Network that the request to the https://api.myjson./bins/13vg19 is not being invoked at all.
Share Improve this question edited May 15, 2017 at 14:24 tholo asked May 15, 2017 at 14:19 tholotholo 5413 gold badges8 silver badges20 bronze badges2 Answers
Reset to default 6Load the app.js after loading all the dependencies references, your order should be
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/angular-sanitize/1.6.4/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/x2js/1.2.0/xml2json.js"></script>
<script src="./ponents/app/app.js"></script>
<script src="./ponents/controller/ctrl.js"></script>
This problem means angular could not inject modules to your app. The reasons for that might be that you didn't import them in the HTML or versions mismatch (for example import anguler version x and angular-animate version y). Generally speaking, in angular exceptions messages usually contain a link to angular's site which explains the problem better, in plain text.
As I see this, you imported you js file before you imported the necessary angular files, and you didn't imported at all angular-animate and ui.bootstrap.