2017-03-17 1 views
2

Ich versuche meine Angular App zu starten, aber ich habe einige Probleme. Whe ich es mit npm laufen installieren bekam ich die nächsteReferenceError: angular ist nicht definiert Angularjs

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 

Dies ist der Code meiner 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"; 
    } 
    }); 

Und meine HTML-Datei

<!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> 

ich nicht tun weiß was ist das Problem :(Hoffe jemand kann mir helfen. Ich habe bereits Knoten installiert, eckig und alles, aber nichts funktioniert und ich weiß nicht warum.

+0

vielleicht müssen Sie Ihre setzen Init im Dokument bereit? – stackoverfloweth

+0

Wann auch immer Sie diesen Fehler erhalten, ist es ziemlich immer wegen der Initialisierung eines Winkelabhängigkeitsmoduls vor dem Laden des Winkelmoduls selbst. – yeaske

Antwort

0

initialisieren Sie das gleiche Modul 2 mal. initialisieren nur Modul einmal

Änderung dieses

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

dieser

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

+0

Ich habe es aber immer noch nicht funktioniert. Ich habe den gleichen Fehler. –

2

Es gibt zwei Probleme

(i) Ihr Modul alle Abhängigkeiten auf einmal injiziert haben sollte,

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

(ii) Sie app.js sollten laden, nachdem alle Winkelreferenzen in der index.html Laden

<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> 
+0

Ich habe das aber immer noch nicht funktioniert. –

+0

@ EnyaValeriaMartínez haben Sie die Reihenfolge überprüft und prüfen, ob die Skripte geladen werden – Sajeetharan

1

Mein erster Gedanke ist: Warum Sie das Modul zweimal erklärt haben?

Die Verwendung von [] im zweiten Argument von 'angular.module' wird ausgeführt, während das Modul deklariert und seine Abhängigkeiten injiziert werden. Wenn Sie jedoch dieselbe Syntax ohne das zweite Argument verwenden, können Sie das Modul aufrufen.

Was Sie tun sollten:

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

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

Dann wieder, ich bin nicht sicher, dass das Problem ist. Ich habe auch bemerkt, dass du die Js und CSS-Dateien in den (Kopf) injiziert hast. Dies kann einige Probleme verursachen und es wird bevorzugt, diese Dateien am Ende des (Körper) zu laden.

Beachten Sie auch, dass die Reihenfolge wichtig, müssen Sie die Winkel JS-Dateien injizieren, dann Module, dann Ihre Controller und so weiter .. Hoffnung, die das Problem lösen werde

Verwandte Themen