CODEWITHSUNDEEP
javascriptangularjsnode.js
Enya Valeria Martínez
Enya Valeria Martínez

Reputation: 31

ReferenceError: angular is not defined Angularjs

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.

Upvotes: 3

Views: 4118

Answers (3)

Tewfik Ghariani
Tewfik Ghariani

Reputation: 311

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

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222522

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>

Upvotes: 2

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41377

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

Upvotes: 0

Related Questions