Lucas Sampaio Lucas Sampaio - 1 year ago 64
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">
<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?

Answer Source

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/