Lucas Sampaio Lucas Sampaio - 5 months ago 37
AngularJS Question

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">
<meta charset="utf-8">
<base href="{% url 'app' %}" />

<div ng-view>

var url = function(path) { return '{{ STATIC_URL }}' + path };
<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>

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?


The order of your script is very important, try putting it in your <head>

<script src=""></script>
    var app = angular.module('myapp', []);

    app.controller('Ctrl', function($scope){
        $scope.variable = "Hello";
<body ng-app="myapp">
    <div ng-controller="Ctrl">

Try it here: