Ich lerne also Angular und habe ein sehr einfaches HTML mit einem JS-Skript. In Zeile 1 von App.js wird immer wieder "Angular is undefined" angezeigt. Ich habe alle eckigen Skripte und mein Skript in einem Skriptordner. Was vermisse ich?

index.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
    <title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
    {{ Heading }}
    <button ng-click="SayHello()">Click me</button>

    <script src="Scripts/angular-min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/App.js"></script>
</body>
</html>

App.js

    var appMainModule = angular.module('appMain', []);

appMainModule.controller("homePageViewModel", function($scope, $http,     $location){ 
    $scope.Heading = "This is the heading";

    $scope.SayHello = function () {
        alert('Hello');
    }
});

Ordnerstruktur in VS:

enter image description here

1
Anonymous 13 Aug. 2015 im 19:49

4 Antworten

Beste Antwort

Ihr Skript ist falsch benannt, es sollte dies sein

<script src="Scripts/angular.min.js"></script>

An Stelle von:

<script src="Scripts/angular-min.js"></script>

Sehen Sie sich Ihren Dateinamen und Ihren Skriptnamen an.

8
Coding Enthusiast 13 Aug. 2015 im 17:01

Angesichts der Tatsache, dass ich Ihren Code in einen Codepen kopiert habe; und die einzigen Änderungen, die ich vorgenommen habe, sind die Verweise auf die CDNJS-Versionen von Angular und Angular Route; und ich sehe kein Problem.

Ihr Problem liegt woanders.

Wenn Sie dieses Projekt erstellen, benötigen Ihre Ausgabeordner denselben relativen Pfad zu Scripts. Mit anderen Worten, Ihre Verzeichnisstruktur erwartet, dass Folgendes zutrifft:

 - index.html
 |
  - Scripts
  |
   - app.js
   - angular-min.js
   - angular-route.js

Ein weiteres Problem könnte sein, dass Sie nicht Copy to output Directory=true oder angular-min.js nicht als Inhalt festgelegt haben (etwas, das in den Ausgabeordner kopiert werden soll).

Hier sind die Änderungen am Codepen:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
    <title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
    {{ Heading }}
    <button ng-click="SayHello()">Click me</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
</body>
</html>
2
George Stocker 13 Aug. 2015 im 17:02

Sie müssen type = "text / javascript" in Ihren eckigen Skriptdefinitionen festlegen. Versuchen

<script type="text/javascript" src="Scripts/angular-min.js"></script>
<script type="text/javascript" src="Scripts/angular-route.min.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
0
Ozan Tabak 13 Aug. 2015 im 17:01

Ich hatte das gleiche Problem damit, dass Winkel undefiniert sind. In meinem Code fehlte das Attribut type = "text / javascript" . Nachdem ich dieses Attribut hinzugefügt hatte, funktionierte es einwandfrei. Versuchen Sie dies auch, wenn die oben genannten Lösungen nicht funktionieren.

0
RohitGoel 29 Aug. 2017 im 12:29