2014-06-05 11 views
6

consideri il pezzo di codice qui sotto:ngApp senza utilizzare alcun nome specifico modulo

parte del file HTML:

<body ng-app> 
    <div ng-controller="MainCtrl">{{name}}</div> 
</body> 

parte del file di js:

function MainCtrl($scope) { 
    $scope.name = "John"; 
} 

ho sempre messo i miei controllori in alcuni moduli, il cui nome è definito in ng-app. Come funziona quando non definisco alcun modulo?

risposta

9

Angolare, dispone di questa funzione di "rilevamento automatico", che consente di cercare i controllori in base al nome se sono definiti nell'ambito globale.

Questa funzione è principalmente destinata a demo rapidi/prototipi/frammenti di proof-of-concept e non a applicazioni reali.


Da di angolare Developer Guide:

NOTA: Anche angolare consente di creare funzioni di controller in ambito globale, questo non è raccomandato. In una vera e propria applicazione che si dovrebbe utilizzare il metodo del modulo angolare .controller per la vostra applicazione [...]


Per quanto riguarda il vuoto ngApp, se non c'è un nome specificato, significa solo che non c'è modulo per assegnare controller, direttive, servizi a, ma a parte questo tutto funziona correttamente.

+0

Trovo strano come Angular consenta questo uso dimostrativo di controller senza moduli e non altri costrutti come direttive e filtri. AFAIK, quest'ultimo deve essere sotto un modulo da utilizzare. – miqid

+0

Credo che il ragionamento principale per consentire ai controllori globali sia quello di consentire di mettere insieme brevi demo (ad es. In caso di associazione dati bidirezionale ecc.), Evitando la complessità della dichiarazione dei moduli. Direttive e filtri sono intrinsecamente molto più complessi (sia in termini di concetto che di implementazione), quindi la complessità extra di dichiarare un modulo è trascurabile (cioè rispetto alla complessità della direttiva esplicativa). – gkalpak

+0

OK, quindi diciamo che inizio solo con 'ng-app', ma poi aggiungo un nome? Perdo la funzionalità della demo. Come mantengo la funzionalità della demo? In questo caso sto usando 'ng-model =" qty "' e 'ng-model =" cost "' per fare l'aritmetica, in uscita a 'Totale: {{qty * costo | currency}} '. – FrankDraws

Problemi correlati