CODEWITHSUNDEEP
angularjs
user3753098
user3753098

Reputation: 216

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 never seems to finish loading (see the image: https://i.sstatic.net/ah0kN.jpg) and then crashes. In Firefox, I get the following error: https://i.sstatic.net/bnBwD.jpg

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

Upvotes: 7

Views: 82052

Answers (3)

malvadao
malvadao

Reputation: 3462

I was having the same problem. Declaring the angular script tag in html's <head> tag worked for me. Therefore:

<!doctype html>
<html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <title>AngularJS tryout</title>
        <script src="../../node_modules/angular/angular.js"></script>
    </head>
    <body>
        <h1>AngularJS tryout</h1>
        <p>Nothing here so {{ 'far' + '!' }}</p>
    </body>
</html>

Upvotes: 0

Josh C.
Josh C.

Reputation: 4373

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

Upvotes: 8

Chris Southam
Chris Southam

Reputation: 582

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.

Upvotes: 3

Related Questions