2014-10-28 15 views
19

Ich habe gerade angefangen zu lernen auf AngularJS von w3schools. Ich versuche Beispiele zu üben, was auch immer sie in den Tutorials erwähnt haben. Alles funktioniert gut, aber als ich zu "AngularJS Controllers" kam, funktionierte es nicht so gut, wie es in w3schools Try it Yourself » funktioniert. Ich habe meinen Code in diese fiddle example gespalten. Mein Skript sieht wie folgt aus:AngularJS ng-controller funktioniert nicht

function personController($scope) { 
    $scope.firstName= "John"; 
    $scope.lastName= "Doe"; 
} 

versuchen, mir zu helfen und machen Sie mir ein gutes Tutorial (oder eine kostenlose PDF-Datei).

+1

Mann Ihr Code funktioniert gut, nur ändern Sie die Option in der Geige von onload auf "kein Umbruch - in " Hier ist die geänderte Option http://jsfiddle.net/dq8r196v/2/ –

+1

Ja, es ist in Geige gut, aber nicht in meiner lokalen Maschine. Ich bekomme den folgenden Fehler: Fehler: [ng: Areq] Argument 'personController' ist keine Funktion, undefined – UiUx

+0

Vielen Dank für diese Frage habe ich das gleiche Problem, wenn Sie ein anderes Tutorial folgen. Ich frage mich, ob es eine neue Version von AngularJS war, die eine andere Syntax erforderte? –

Antwort

21

Dies ist Ihr corrected fiddle.

Es ist eine gute Praxis für Winkel, dass die Controller-Definition wie folgt aussehen muss:

angular.module("app", []).controller("personController", function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
}); 

Und ohne Zweifel das beste Tutorial jemals für das Erlernen der Grundlagen von Angular ist die CodeSchool eins!

Hoffe, das hilft.

+0

Ja, es funktioniert gut, wenn ich meine Funktion in deinen angular.module Code ändere. aber was ist der Unterschied zwischen diesen beiden Funktionen ..? – UiUx

+0

Grundsätzlich die Syntax, die ich verwendet habe, können Sie mehr Parameter zu Ihrem Controller in der Zukunft, wie zum Beispiel "$ http", und viele andere übergeben, was sehr nützlich ist. – Kutyel

+0

Danke Kutyel .... – UiUx

1

Sie müssen ein Anwendungsmodul erstellen und dann einen Controller hinzufügen. Im eckigen Bereich geht es um Abhängigkeiten. Zweitens benötigen Sie einen App-Namen. Das Basis-Tutorial ist auf ihrer Hauptseite: https://docs.angularjs.org/tutorial/step_00 Ich begann damit, und es hat gut mit mir gearbeitet. Führen Sie einfach alle Schritte beginnend mit Schritt 1 aus.

+0

Ihr Tutorial ist sehr einfach und Sie lernen durch kleine Schritte. Es dauert ungefähr 3 Stunden. Dann müssen Sie nach einem fortgeschrittenen Tutorial suchen und beginnen, Dokumentation zu lesen :) Eckig ist sehr fortgeschritten. – Beri

+0

Hallo Beri Vielen Dank für Ihre Zeit und ich bekomme den Fehler, den ich in oben genannten Kommentar erwähnt habe, bitte finden Sie es und helfen Sie mir – UiUx

4

Ich habe gerade Ihre js Fiddle geändert. Bitte überprüfen Sie die fiddle example

function personController($scope) { 
    $scope.firstName= "John"; 
    $scope.lastName= "Doe"; 
} 

There was no issue with your code except JS fiddle settings from onLoad to No wrap - in head

enter image description here

+0

, wenn ich in meiner lokalen Maschine versuchte, bekomme ich den folgenden Fehler. Fehler: [ng: areq] Argument 'personController' ist keine Funktion, undefined – UiUx

+0

Hey @ UiUx, Könnten Sie bitte Ihren lokalen Code einschließlich HTML und js posten, damit ich Ihnen besser helfen kann. –

+0

Danke. Es funktioniert, BTW in einem neuen Design von JS Fiddle müssen Sie diese Option in Javascript-Bereich einrichten, indem Sie in einem Dropdown-Menü unter (JavaScipt + Zahnrad) -Taste. –

11

Es ist ein neuer Ansatz. Wir können keine Controller ohne ein Modul mehr verwenden. Schauen Sie sich this an. Fügen Sie einfach ein Modul hinzu und hängen Sie den Controller an, dann haben Sie kein Problem.

+0

es scheint, dass Sie Recht haben, aber können Sie jede Ressource dafür bereitstellen. Der von Ihnen angegebene Link erwähnt nichts geschriebenes. –

+0

Ich habe mir beim Debuggen die Haare ausgezogen, warum es vor ein paar Wochen (1.2.x) funktionierte und jetzt nicht funktioniert (1.3.x) ;-) –

1

Dies ist ein allgemeines Suchergebnis für "Angular Controller Not Working", also dachte ich, es wäre hilfreich, die Lösung hinzuzufügen, die mein "Controller nicht funktioniert" Problem behoben.

hatte ich meine Basisstrecke mit $routeProvider zeigt auf eine Controller-Datei und einer templateUrl teilweise wie folgt:

$routeProvider.when('/', { 
    templateUrl: 'partials/home.html', 
    controller: 'homePage' 
}); 

ich mehrere andere Routen hatte und alle diese Steuerungen gearbeitet, aber aus irgendeinem Grund meine erste Route wouldn‘ t. Es stellte sich heraus, dass ich einen kleinen logischen Fehler in meinem Partial hatte und das verhinderte, dass irgendeiner meiner Controller-Code lief.

Dumb kleiner Fehler, aber ich war überrascht, dass es ein logisches Problem in meinem Teil war, das verhindert, dass Controller-Code ausgeführt wurde. Es dauerte viel länger, als ich zugeben wollte, denn das Problem war nicht in meinem "JavaScript", obwohl die Konsolenfehler vorhanden waren. Die Freuden des eng gekoppelten Front-End-Codes, amiright?

0

Das gleiche Problem kann sein, wenn Sie versuchen werden, ngApp in eine andere ngApp zu verschachteln.

Die Dokumentation sagt:

AngularJS applications cannot be nested within each other.

0

Sie die Eingabe-Funktion als Parameter innerhalb Modul haben

var app = angular.module('app',[]); 
app.controller('personController',function($scope){ 
    $scope.firstName = 'John'; 
    $scope.lastName = 'Smith'; 
}); 
0

von np-app="myApp" in jedem Tag von HTML Hinzufügen wie <html ng-app = "myApp"> mein Code funktioniert gut .