Angular.js: Uncaught error, no module: myapp
I’m trying too bootstrap an angular.js project. This is my index.html:
<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<base href="https://stackoverflow.com/questions/17283291/{% url"app' %}" />
<title>Project</title>
</head>
<body>
<div ng-view>
<p>Loading...</p>
</div>
<script>
var url = function(path) { return '{{ STATIC_URL }}' + path };
</script>
<script src="{{ STATIC_URL }}js/jquery-1.10.1.js"></script>
<script src="{{ STATIC_URL }}js/angular.js"></script>
<script src="{{ STATIC_URL }}js/project/app.js"></script>
<script src="{{ STATIC_URL }}js/project/controllers.js"></script>
</body>
</html>
The url 'app' on the head simply prints the subpath, /app, for example. This is my app.js:
'use strict';
var app = angular.module('myapp', []);
app.config(['$routeProvider', function($router) {
$router.when("https://stackoverflow.com/", {
templateUrl: url('partials/foo.html'),
controller: controllers.Foo
});
}]);
The problem is that everytime I try to run it, an exception is raised: Uncaught Error: No module: myapp, and this is almost the same way angular-seed works. I searched on Google and StackOverflow but none of the answers (one and two) helped me.
Here’s a fiddle about my error (you should open the browser’s console to see it). What’s going wrong?
The order of your script is very important, try putting it in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('Ctrl', function($scope){
$scope.variable = "Hello";
});
</script>
<body ng-app="myapp">
<div ng-controller="Ctrl">
<p>{{variable}}</p>
</div>
</body>
Try it here:
Complementing AlexCheuk‘s answer, I realized that my app.js file was involved in a closure:
(function($) {
'use strict';
// all angular.js stuff
)(jQuery);
Removing the closure it worked (without changing the orders as Alex said)! I don’t know exacly why, but that’s ok.
I face the same problem but none of the above trick worked for me but this one, see the setting in image
Change from “OnLoad” to “No wrap – “
In my case when using IIFE notation I forgot self invoke parentheses.
(function () {
angular.module("adminApp", []);
}() //don't forget self invoke parentheses
);
i was facing the same error but i was doing a silly mistake, i was not including the controller.js file in my jsp page.
just included this:
<script type="text/javascript" src="https://stackoverflow.com/questions/17283291/${pageContext.request.contextPath}/resources/js/controller.js"></script>and it worked excellently.
I ran into a similar issue where there, while running Yeoman/grunt server.
What fixed it for me, was restarting the grunt server.
