Angular.js: Uncaught error, no module: myapp

Question

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="{% 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('/', {
        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?

@Blackhole, it's here. I tried my best to put it on jsFiddle (open your console to see the issue). — Lucas Sampaio
– Lucas Sampaio, Commented Jun 24, 2013 at 19:40
I think your STATIC_URL variable isn't defined. It's outside of a angular scope, so you cannot use {{}}. Try using a constant string for your src instead of an angular variable. — Foo L
– Foo L, Commented Jun 24, 2013 at 19:41
@flim, just to clarify, STATIC_URL is a django variable, and it's rendered on server side. — Lucas Sampaio
– Lucas Sampaio, Commented Jun 24, 2013 at 20:09

AlexCheuk · Accepted Answer · 2013-06-24 19:48:36Z

40

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:

http://jsfiddle.net/vvfnN/2/

edited Jun 24, 2013 at 19:48

answered Jun 24, 2013 at 19:43

AlexCheuk

5,8756 gold badges32 silver badges36 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:16:56Z

10

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.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jun 24, 2013 at 19:54

Lucas Sampaio

1,5782 gold badges19 silver badges36 bronze badges

2 Comments

dskang Over a year ago

@lsmagalhaes, the reason that removing the jQuery's ready call fixed your problem is that Angular will bootstrap on the DOMContentLoaded event, which happens to be the same event that jQuery calls its ready handler. What's happening is that Angular will bootstrap and look for your module based on the value of ng-app, but since the jQuery ready handler has not run yet, the module will not have been created yet. That's why you were getting the Uncaught Error: No module: myapp error.

P.M Over a year ago

This actually seems to be the answer. on jsFiddle, just load angularjs on "no-wrap -in head" or "no-wrap -in body" and the error is gone. thanks.

Ali Adravi · Accepted Answer · 2016-09-01 02:34:18Z

2

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

answered Sep 1, 2016 at 2:34

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

1 Comment

user3501613 Over a year ago

very good answer.. this is worked for me,,thankss.... can u explain what is the meaning of No wrap-in <head>

Erkan · Accepted Answer · 2016-04-19 19:23:41Z

0

In my case when using IIFE notation I forgot self invoke parentheses.

(function () {
     angular.module("adminApp", []); 
}() //don't forget self invoke parentheses
);

edited Apr 19, 2016 at 19:23

answered Jun 11, 2015 at 19:43

Erkan

965 bronze badges

1 Comment

Xsmael Over a year ago

*forgot please, RIP english

Rajan Chauhan · Accepted Answer · 2017-11-22 04:42:43Z

0

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="${pageContext.request.contextPath}/resources/js/controller.js"></script>

and it worked excellently.

answered Nov 22, 2017 at 4:42

Rajan Chauhan

5112 gold badges7 silver badges18 bronze badges

Comments

TOBlender · Accepted Answer · 2013-08-21 21:22:24Z

-4

I ran into a similar issue where there, while running Yeoman/grunt server. What fixed it for me, was restarting the grunt server.

answered Aug 21, 2013 at 21:22

TOBlender

1,06311 silver badges17 bronze badges

1 Comment

Phương Nguyễn Over a year ago

This has nothing to do with this issue.

Collectives™ on Stack Overflow

Angular.js: Uncaught error, no module: myapp

6 Answers 6

Comments

2 Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related