ReferenceError: angular is not defined Angularjs

Question

I'm trying to run my Angular app but I have some problems. Whe I run it with npm install I got the next

ReferenceError: angular is not defined
    at Object.<anonymous> (C:\Users\GrupoBECM18\Documents\Proyectos\StockPitch-Web\front\js\app.js:4:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

This is the code of my app.js

    'use strict';

angular.module('MyApp', ['ui.bootstrap']);


// Declare app module and Appendages
angular.module('MyApp', ['ngCookies'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/home', {
        title: 'Home',
        templateUrl: 'front/login.html',
        //controller: 'loginctrl.js'
      })
      .otherwise({redirectTo: '/home'});
  }])
  .run(function($cookieStore, $rootScope, $http) {
    if ($cookieStore.get('djangotoken')) {
      $http.defaults.headers.common['Authorization'] = 'Token ' + $cookieStore.get('djangotoken');
      //document.getElementById("main").style.display = "block";
    } else {
        document.getElementById("login-holder").style.display = "block";
    }
  });

And my HTML file

<!DOCTYPE html>
<html ng-app="MyApp">
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="js/jquery-1.11.2.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script src="../prefixfree/prefixfree.js"></script>
<script src="../prefixfree/prefixfree.min.js"></script>


<script src="js/loginctrl.js"></script>
<script src="js/variablesGlobales.js"></script>
<script src="js/headerfooter-login.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/styleLanding.css">





    <title>Landing Page</title>
</head>
<body ng-controller="loginctrl">
<div class="container-fluid">
    <div id="headerl">
    </div>  
    <div class="content-bar col-lg-12 col-md-12 col-sm-12">
        <h1>Lorem Ipsum Dolor Sit Amet</h1>
        <h3>Li Europan lingues es membres del sam familie. Lor separat</h3>
            <button data-toggle="modal" data-target="#squarespaceModal" class="get">
                Get Started
        </button>
    </div>

    <div class="center">
            <div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header" >
                            <button type="button" class="close" data-dismiss="modal" id="close">
                                <span aria-hidden="true" class="X">X</span>
                            </button>

                            <h3 class="modal-title" id="lineModalLabel"></h3>
                        </div>


                        <div class="modal-header" id="barraL">
                            <button type="button" class="close" data-dismiss="modal"></button>
                            <h3 class="modal-title" id="lineModalLabel">LOGIN</h3>
                        </div>

                <div class="modal-body">
                    <div ng-controller="loginctrl">
                        <form>
                          <div class="form-group">
                            <label for="exampleInputEmail1" class="email">Email</label>
                            <input class="form-control" id="InputEmail1" ng-model="emailu" >
                          </div>
                          <div class="form-group">
                            <label for="exampleInputPassword1" class="password">Password</label>
                            <input type="password" class="form-control" id="InputPassword1" ng-model="passwordu" >
                          </div>

                            <button type="submit" class="confirm" id="boton" ng-click="sendlgctrl()"><!--a href="disclaimer.html"--><a style="text-decoration:none; color:#ffffff;" >Confirm</a></button>

                        </form>
                    </div>

                </div>

            </div>
          </div>
        </div>
    </div>
</div>


</body>
</html>

I don't know whats the problem :( Hope someone can help me. I already installed node, angular and everything but nothing is working and I don't know why.

When ever you get this error, it is pretty much always because of you initializing an angular dependency module before loading angular module itself. — yeaske
– yeaske, Commented May 23, 2017 at 15:58

Sajeetharan · Accepted Answer · 2017-03-17 17:38:59Z

2

There are two issues

(i) Your module should have all the dependencies injected at once,

angular.module('MyApp', ['ui.bootstrap','ngCookies']);

(ii) You app.js should load after loading all the angular references in the index.html

<script src="js/jquery-1.11.2.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script src="../prefixfree/prefixfree.js"></script>
<script src="../prefixfree/prefixfree.min.js"></script>
<script src="js/app.js"></script>

answered Mar 17, 2017 at 17:38

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sajeetharan Over a year ago

@EnyaValeriaMartínez did you check the order and check if the scripts are loading

Tewfik Ghariani · Accepted Answer · 2017-03-17 18:29:44Z

My first thought is: why have you declared the module twice?

angular.module('MyApp', ['ui.bootstrap']);


// Declare app module and Appendages
angular.module('MyApp', ['ngCookies'])

Using [] in the second argument of 'angular.module' is done while declaring the module and injecting its dependencies. However, using the same syntax without the second argument allows you to call the module.

What you ought to do:

angular.module('MyApp', ['ui.bootstrap','ngCookies']);

angular.module('MyApp').config....

Then again, I am not certain that is the issue. I have also noticed you injected the Js and css files in the (head). This may cause some problems and it is preferred to load those files at the end of the (body).

Keep in mind also that the order matters, you must inject the angular JS files, then your modules, then your controllers and so on.. Hope that'll solve the issue

Sachila Ranawaka · Accepted Answer · 2017-03-17 17:34:22Z

0

you initialize the same module 2 times. Just initialize module once

change this

angular.module('MyApp', ['ui.bootstrap']); 
// Declare app module and Appendages
angular.module('MyApp', ['ngCookies'])

to this

angular.module('MyApp', ['ui.bootstrap','ngCookies']);

answered Mar 17, 2017 at 17:34

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

1 Comment

Enya Valeria Martínez Over a year ago

I did it but still not working. I have the same error.

Collectives™ on Stack Overflow

ReferenceError: angular is not defined Angularjs

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related