AngularJS
Controller
Ricerca…
Sintassi
- <htmlElement ng-controller = "controllerName"> ... </ htmlElement>
- <script> app.controller ('controllerName', controllerFunction); </ Script>
Il tuo primo controller
Un controller è una struttura di base utilizzata in Angular per preservare l'ambito e gestire determinate azioni all'interno di una pagina. Ogni controller è accoppiato con una vista HTML.
Di seguito è riportato uno standard di base per un'app Angular:
<!DOCTYPE html>
<html lang="en" ng-app='MyFirstApp'>
<head>
<title>My First App</title>
<!-- angular source -->
<script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
<!-- Your custom controller code -->
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-controller="MyController as mc">
<h1>{{ mc.title }}</h1>
<p>{{ mc.description }}</p>
<button ng-click="mc.clicked()">
Click Me!
</button>
</div>
</body>
</html>
Ci sono alcune cose da notare qui:
<html ng-app='MyFirstApp'>
L'impostazione del nome dell'app con ng-app ti consente di accedere all'applicazione in un file Javascript esterno, che verrà trattato di seguito.
<script src="js/controllers.js"></script>
Avremo bisogno di un file Javascript dove definisci i tuoi controller e le loro azioni / dati.
<div ng-controller="MyController as mc">
L'attributo ng-controller imposta il controller per quell'elemento DOM e tutti gli elementi che sono figli (ricorsivamente) sotto di esso.
Puoi avere più di uno stesso controller (in questo caso, MyController ) dicendo ... as mc , stiamo dando a questo istanza del controller un alias.
<h1>{{ mc.title }}</h1>
La notazione {{ ... }} è un'espressione angolare. In questo caso, questo imposterà il testo interno di quell'elemento <h1> a qualunque sia il valore di mc.title .
Nota: Angular utilizza l'associazione dati bidirezionale, il che significa che indipendentemente dal modo in cui si aggiorna il valore mc.title , si rifletterà sia sul controller che sulla pagina.
Si noti inoltre che le espressioni angolari non devono fare riferimento a un controller. Un'espressione Angolare può essere semplice come {{ 1 + 2 }} o {{ "Hello " + "World" }} .
<button ng-click="mc.clicked()">
ng-click è una direttiva Angular, in questo caso vincola l'evento click per il pulsante per attivare la funzione clicked() dell'istanza MyController .
Con queste cose in mente, scriviamo un'implementazione del controller MyController . Con l'esempio sopra, dovresti scrivere questo codice in js/controller.js .
Innanzitutto, devi istanziare l'app Angolare nel tuo Javascript.
var app = angular.module("MyFirstApp", []);
Nota che il nome che passiamo qui è lo stesso del nome che hai impostato nel tuo HTML con la direttiva ng-app .
Ora che abbiamo l'oggetto app, possiamo usarlo per creare controller.
app.controller('MyController', function(){
var ctrl = this;
ctrl.title = "My First Angular App";
ctrl.description = "This is my first Angular app!";
ctrl.clicked = function(){
alert("MyController.clicked()");
};
});
Nota: per tutto ciò che vogliamo far parte dell'istanza del controllore, usiamo this parola chiave.
Questo è tutto ciò che è necessario per costruire un controller semplice.
Creazione di controller
angular
.module('app')
.controller('SampleController', SampleController)
SampleController.$inject = ['$log', '$scope'];
function SampleController($log, $scope){
$log.debug('*****SampleController******');
/* Your code below */
}
Nota: l' .$inject assicurerà che le tue dipendenze non vengano rimescolate dopo il minification. Inoltre, assicurarsi che sia in ordine con la funzione denominata.
Creazione di controllori, Minificazione sicura
Ci sono un paio di modi diversi per proteggere la creazione del tuo controller da minification.
Il primo è chiamato annotazione array in linea. Sembra il seguente:
var app = angular.module('app');
app.controller('sampleController', ['$scope', '$http', function(a, b){
//logic here
}]);
Il secondo parametro del metodo controller può accettare una matrice di dipendenze. Come puoi vedere, ho definito $scope e $http che dovrebbero corrispondere ai parametri della funzione controller in cui a sarà $scope , e b sarebbe $http . Prendi nota che l'ultimo elemento dell'array dovrebbe essere la funzione del tuo controller.
La seconda opzione utilizza la proprietà $inject . Sembra il seguente:
var app = angular.module('app');
app.controller('sampleController', sampleController);
sampleController.$inject = ['$scope', '$http'];
function sampleController(a, b) {
//logic here
}
Questo fa la stessa cosa dell'annotazione dell'array inline ma offre uno stile diverso per quelli che preferiscono un'opzione all'altra.
L'ordine delle dipendenze iniettate è importante
Quando si iniettano dipendenze utilizzando il modulo matrice, assicurarsi che l'elenco delle dipendenze corrisponda al corrispondente elenco di argomenti passati alla funzione controller.
Si noti che nell'esempio seguente, $scope e $http sono invertiti. Ciò causerà un problema nel codice.
// Intentional Bug: injected dependencies are reversed which will cause a problem
app.controller('sampleController', ['$scope', '$http',function($http, $scope) {
$http.get('sample.json');
}]);
Utilizzo di ControllerAs in Angular JS
In $scope angolare è la colla tra il controller e la vista che aiuta con tutte le nostre esigenze di associazione dei dati. Controller As è un altro modo di collegare controller e view ed è quasi sempre consigliato. Fondamentalmente questi sono i due costrutti del controller in Angular (cioè $ scope e Controller As).
Diversi modi di usare Controller As are -
controllerAs Visualizza sintassi
<div ng-controller="CustomerController as customer">
{{ customer.name }}
</div>
controllerAs Sintassi del controller
function CustomerController() {
this.name = {};
this.sendMessage = function() { };
}
controllerAs con VM
function CustomerController() {
/*jshint validthis: true */
var vm = this;
vm.name = {};
vm.sendMessage = function() { };
}
controllerAs è zucchero sintattico su $scope . È ancora possibile associare alla vista e accedere ancora ai metodi $scope . L'utilizzo di controllerAs è una delle migliori pratiche suggerite dal team di base angolare. Ci sono molte ragioni per questo, alcune di queste sono -
$scopeespone i membri dal controller alla vista tramite un oggetto intermedio. Impostandothis.*, possiamo esporre solo ciò che vogliamo esporre dal controller alla vista. Inoltre segue il modo standard JavaScript di utilizzare questo.usando la sintassi
controllerAs, abbiamo un codice più leggibile e la proprietà genitore può essere letta usando il nome alias del controllore genitore invece di usare la sintassi$parent.Promuove l'uso del binding a un oggetto "tratteggiato" nella View (ad esempio, customer.name anziché name), che è più contestuale, più facile da leggere ed evita qualsiasi problema di riferimento che possa verificarsi senza "punteggiatura".
Aiuta a evitare l'uso
$parentchiamate$parentin Views con i controller nidificati.Utilizzare una variabile di cattura per questo quando si utilizza la sintassi del
controllerAs. Scegli un nome di variabile consistente comevm, che sta per ViewModel. Perchéthisparola chiave è contestuale e se utilizzata all'interno di una funzione all'interno di un controller può cambiare il suo contesto. Catturare il contesto di questo evita di incontrare questo problema.
NOTA: usando la sintassi controllerAs aggiungere al riferimento corrente dello scope al controller corrente, quindi disponibile come campo
<div ng-controller="Controller as vm>...</div>
vm è disponibile come $scope.vm .
Creazione di controller angolari sicuri per la sicurezza
Per creare controllori angolari sicuri per minificazione, cambierai i parametri della funzione del controller .
Il secondo argomento nella funzione module.controller deve essere passato a un array , dove l' ultimo parametro è la funzione controller e ogni parametro prima è il nome di ciascun valore iniettato.
Questo è diverso dal normale paradigma; che prende la funzione del controller con gli argomenti iniettati.
Dato:
var app = angular.module('myApp');
Il controller dovrebbe assomigliare a questo:
app.controller('ctrlInject',
[
/* Injected Parameters */
'$Injectable1',
'$Injectable2',
/* Controller Function */
function($injectable1Instance, $injectable2Instance) {
/* Controller Content */
}
]
);
Nota: non è necessario che i nomi dei parametri iniettati corrispondano, ma verranno associati in ordine.
Questo ridurrà a qualcosa di simile a questo:
var a=angular.module('myApp');a.controller('ctrlInject',['$Injectable1','$Injectable2',function(b,c){/* Controller Content */}]);
Il processo di minificazione sostituirà ogni istanza di app con a istanza di $Injectable1Instance con b e ogni istanza di $Injectable2Instance con c .
Controller annidati
Anche i controller di nidificazione incatenano il $scope . La modifica di una variabile $scope nel controller nidificato modifica la stessa variabile $scope nel controller principale.
.controller('parentController', function ($scope) {
$scope.parentVariable = "I'm the parent";
});
.controller('childController', function ($scope) {
$scope.childVariable = "I'm the child";
$scope.childFunction = function () {
$scope.parentVariable = "I'm overriding you";
};
});
Ora proviamo a gestirli entrambi, annidati.
<body ng-controller="parentController">
What controller am I? {{parentVariable}}
<div ng-controller="childController">
What controller am I? {{childVariable}}
<button ng-click="childFunction()"> Click me to override! </button>
</div>
</body>
I controller di nidificazione possono avere i suoi benefici, ma una cosa deve essere tenuta a mente quando si fa così. La chiamata alla direttiva ngController crea una nuova istanza del controller, che può spesso generare confusione e risultati imprevisti.