user3753098 user3753098 - 3 months ago 10
AngularJS Question

ReferenceError: Angular is not defined

I've been sitting with this problem for a few hours and found a few answers, none of which have worked for me so far (AngularJs ReferenceError: angular is not defined). For some reason I can't seem to get my app to use Angular.JS. After adding the required js-files, my main file looks like this:

<!DOCTYPE html>
<html ng-app="AppName">
<head>
<title></title>

<link rel="stylesheet" href="/stylesheets/main.css">

</head>
<body>
<!-- Wrapper-->
<div id="wrapper">

<div id="page-content-wrapper">

<div class="page-content inset" ng-view>
</div>

</div>
</div>
<!-- /WRAPPER-->

<!-- ANGULAR CUSTOM -->
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="javascripts/AngularApp.js"></script>
<script src="javascripts/appRoutes.js"></script>
<script src="javascripts/controllers/MainCtrl.js"></script>
<script src="javascripts/controllers/SettingsCtrl.js"></script>
<script src="javascripts/services/SettingsService.js"></script>

</body>
</html>


When I run the app it seems to never finish loading (see image: http://imgur.com/FIAH4tH) and then crashes. In firefox I get the following error thrown at me: http://imgur.com/UT3g7wY

Does anyone know how I can solve this problem?

Thanks!

--EDIT--
I've updated the posotion of the scripts in the app.

My AngularApp.js file looks like this:

angular.module('AppName', ['ngRoute', 'appRoutes', 'MainCtrl', 'SettingsCtrl', 'SettingsService']);

Answer

If your module AppName is defined in AngularApp.js, that needs to come before MainCtrl js.

Are your .js files separate angular modules? If so, they should not be listed as modules in your angular.module dependencies.

angular.module('AppName', ['ngRoute']);

Comments