Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ReferenceError: Angular is not defined

Tags:

angularjs

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 never seems to finish loading (see the image: http://imgur.com/FIAH4tH) and then crashes. In Firefox, I get the following error: http://imgur.com/UT3g7wY

Does anyone know how I can solve this problem?

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

My AngularApp.js file looks like this:

angular.module('AppName', ['ngRoute', 'appRoutes', 'MainCtrl', 'SettingsCtrl', 'SettingsService']);
like image 250
user3753098 Avatar asked Jun 24 '14 13:06

user3753098


2 Answers

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']);

like image 148
Josh C. Avatar answered Nov 10 '22 18:11

Josh C.


Definitely include any of the libs/ files before your own custom code.
So put <script src="libs/angular/angular.js"></script> and <script src="libs/angular-route/angular-route.min.js"></script> before your other javascripts files and you should find the problem fixed.

like image 20
Chris Southam Avatar answered Nov 10 '22 18:11

Chris Southam