2014-10-28 4 views
19

Ho appena iniziato l'apprendimento su AngularJS da w3schools. Sto cercando di mettere in pratica esempi di ciò che hanno mai menzionato nei tutorial. Ogni cosa funziona bene ma quando sono arrivato a "AngularJS Controller" non funziona correttamente come funziona bene in w3schools Try it Yourself ». Ho forked il mio codice in questo fiddle example. Il mio script simile a questa:AngularJS ng-controller non funzionante

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

cercare di aiutare me e mi suggerisce un buon tutorial (o qualsiasi file pdf gratuito).

+1

man il tuo codice funziona bene basta cambiare l'opzione nel violino da onload a "no wrap - in " qui è l'opzione modificata http://jsfiddle.net/dq8r196v/2/ –

+1

sì va bene in fiddle ma non nella mia macchina locale. Sto ottenendo il seguente errore: Errore: [ng: areq] Argomento 'personController' non è una funzione, ottenuto indefinito – UiUx

+0

Grazie per questa domanda, ho lo stesso problema quando seguo un altro tutorial. Mi chiedo se è stata una nuova versione di AngularJS che ha richiesto un'altra sintassi? –

risposta

21

Questo è il tuo corrected fiddle.

Si tratta di una buona pratica per angolare che la definizione di controllo deve essere simile a questa:

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

E, senza dubbio, il miglior tutorial mai per imparare le basi del angolare è il CodeSchool uno!

Spero che questo aiuti.

+0

sì, funziona bene quando cambio la mia funzione nel codice angular.module. ma qual è la differenza tra queste due funzioni ..? – UiUx

+0

fondamentalmente la sintassi che ho usato consentirà di passare più parametri al controller in futuro, ad esempio '$ http' per esempio, e molti altri, che è molto utile. – Kutyel

+0

Grazie Kutyel .... – UiUx

1

È necessario creare un modulo dell'applicazione e quindi aggiungere un controller. In angolare si tratta di dipendenze. In secondo luogo è necessario un nome app. Il tutorial di base è sulla loro pagina principale: https://docs.angularjs.org/tutorial/step_00 Ho iniziato con esso, e ha funzionato bene con me. Basta fare tutti i passaggi a partire dal passaggio 1.

+0

Il loro tutorial è molto semplice e tu stai imparando a piccoli passi. Ci vorranno circa 3 ore. Quindi dovrai cercare un tutorial più avanzato e iniziare a leggere la documentazione :) Angular è molto avanzato. – Beri

+0

Ciao Beri grazie per il tuo tempo e sto ricevendo l'errore che ho citato nel commento sopra, per favore trovalo e aiutami – UiUx

4

Ho appena modificato il js fiddle. Si prega di verificare la 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

quando ho provato nel mio computer locale sto ricevendo il seguente errore. Errore: [ng: areq] Argomento 'personController' non è una funzione, ottenuto indefinito – UiUx

+0

Hey @ UiUx, Potresti pubblicare il tuo codice locale includendo html e js in modo che possa aiutarti meglio. –

+0

Grazie. Funziona, BTW in un nuovo design di JS fiddle è necessario impostare questa opzione nell'area javascript in un menu a discesa sotto il pulsante (JavaSctipt + gear). –

11

Si tratta di un nuovo approccio. Non possiamo più usare i controller senza un modulo. Dai un'occhiata a this. Basta aggiungere un modulo e aggiungere il controller, quindi non avrai problemi.

+0

sembra che tu abbia ragione, ma puoi fornire qualsiasi risorsa per quello. il link che hai fornito non menziona nulla di scritto. –

+0

Ho tirato fuori i miei capelli mentre eseguivo il debug perché funzionava bene qualche settimana fa (1.2.x) e non funziona ora (1.3.x) ;-) –

1

Questo è un risultato di ricerca comune per "Il controller angolare non funziona", quindi ho pensato che sarebbe stato utile aggiungere la soluzione che ha risolto il problema del "controller non funzionante".

ho avuto il mio percorso base con $routeProvider che punta a un file di controller e un TemplateURL parziale in questo modo:

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

ho avuto diversi altri itinerari e tutti quei controllori funzionato, ma per qualche motivo il mio primo wouldn percorso' t. Risulta, ho avuto un piccolo errore logico nel mio parziale e questo ha impedito a QUALSIASI del mio codice del controller di funzionare.

Piccolo stupido errore, ma sono stato colto alla sprovvista dal fatto che si trattava di un problema logico nel mio parziale che impediva l'esecuzione di qualsiasi codice del controller. Ci è voluto molto più tempo di quanto avrei voluto ammettere di trovare perché il problema non era nel mio "JavaScript" anche se erano presenti gli errori della console. Le gioie del codice front-end strettamente accoppiato, amiright?

0

Lo stesso problema potrebbe essere se tenterai di nidificare ngApp in un'altra app.

La documentazione dice:

AngularJS applications cannot be nested within each other.

0

dovete funzione di ingresso come parametro del modulo

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

all'interno con l'aggiunta di np-app="myApp" in qualsiasi tag di HTML come <html ng-app = "myApp"> il mio codice funziona bene .