AngularJS
Controllers
Zoeken…
Syntaxis
- <htmlElement ng-controller = "controllerName"> ... </htmlElement>
- <script> app.controller ('controllerName', controllerFunction); </ Script>
Je eerste controller
Een controller is een basisstructuur die in Angular wordt gebruikt om het bereik te behouden en bepaalde acties binnen een pagina af te handelen. Elke controller is gekoppeld aan een HTML-weergave.
Hieronder vindt u een standaard boilerplate voor een Angular-app:
<!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>
Hier zijn een paar dingen om op te merken:
<html ng-app='MyFirstApp'>
Als u de app-naam ng-app met ng-app u toegang tot de applicatie in een extern Javascript-bestand, dat hieronder wordt behandeld.
<script src="js/controllers.js"></script>
We hebben een Javascript-bestand nodig waarin u uw controllers en hun acties / gegevens definieert.
<div ng-controller="MyController as mc">
Het attribuut ng-controller stelt de controller in voor dat DOM-element en alle onderliggende elementen (recursief).
U kunt meerdere van dezelfde controller hebben (in dit geval MyController ) door te zeggen ... as mc geven we deze instantie van de controller een alias.
<h1>{{ mc.title }}</h1>
De {{ ... }} notatie is een hoekige uitdrukking. In dit geval stelt dit de interne tekst van dat <h1> -element in op de waarde van mc.title .
Opmerking: Angular maakt gebruik van dual-way gegevensbinding, wat betekent dat ongeacht hoe u de waarde van mc.title , deze wordt weerspiegeld in zowel de controller als de pagina.
Merk ook op dat hoekige uitdrukkingen niet naar een controller hoeven te verwijzen. Een hoekuitdrukking kan zo eenvoudig zijn als {{ 1 + 2 }} of {{ "Hello " + "World" }} .
<button ng-click="mc.clicked()">
ng-click is een hoekrichtlijn, in dit geval bindend aan de gebeurtenis click voor de knop om de functie MyController clicked() van de instantie MyController .
Laten we met die dingen een implementatie van de MyController controller schrijven. Met het bovenstaande voorbeeld zou u deze code in js/controller.js .
Eerst moet u de Angular-app instantiëren in uw Javascript.
var app = angular.module("MyFirstApp", []);
Merk op dat de naam die we hier doorgeven hetzelfde is als de naam die u in uw HTML hebt ingesteld met de ng-app richtlijn.
Nu we het app-object hebben, kunnen we dat gebruiken om controllers te maken.
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()");
};
});
Opmerking: voor alles waarvan we deel willen uitmaken van de controllerinstantie gebruiken we het trefwoord this .
Dit is alles wat nodig is om een eenvoudige controller te bouwen.
Controllers maken
angular
.module('app')
.controller('SampleController', SampleController)
SampleController.$inject = ['$log', '$scope'];
function SampleController($log, $scope){
$log.debug('*****SampleController******');
/* Your code below */
}
Opmerking: De .$inject zal ervoor zorgen dat uw afhankelijkheden niet vervormd raken na minificatie. Zorg er ook voor dat het in orde is met de genoemde functie.
Controllers maken, Minification veilig
Er zijn een paar verschillende manieren om het maken van uw controller te beschermen tegen verkleining.
De eerste wordt annotatie van inline-array genoemd. Het ziet er als volgt uit:
var app = angular.module('app');
app.controller('sampleController', ['$scope', '$http', function(a, b){
//logic here
}]);
De tweede parameter van de controllermethode kan een reeks afhankelijkheden accepteren. Zoals je kunt zien, heb ik $scope en $http gedefinieerd die moeten overeenkomen met de parameters van de controllerfunctie waarin a de $scope zal zijn en b $http . Merk op dat het laatste item in de array de functie van uw controller moet zijn.
De tweede optie is het gebruik van de eigenschap $inject . Het ziet er als volgt uit:
var app = angular.module('app');
app.controller('sampleController', sampleController);
sampleController.$inject = ['$scope', '$http'];
function sampleController(a, b) {
//logic here
}
Dit doet hetzelfde als inline array-annotatie, maar biedt een andere stijl voor degenen die de ene optie verkiezen boven de andere.
De volgorde van geïnjecteerde afhankelijkheden is belangrijk
Wanneer u afhankelijkheden injecteert met behulp van het matrixformulier, moet u ervoor zorgen dat de lijst met afhankelijkheden overeenkomt met de bijbehorende lijst met argumenten die zijn doorgegeven aan de controllerfunctie.
Merk op dat in het volgende voorbeeld $scope en $http worden teruggedraaid. Dit veroorzaakt een probleem in de code.
// Intentional Bug: injected dependencies are reversed which will cause a problem
app.controller('sampleController', ['$scope', '$http',function($http, $scope) {
$http.get('sample.json');
}]);
ControllerAs gebruiken in Angular JS
In Angular $scope is de lijm tussen de controller en de weergave die helpt bij al onze databindende behoeften. Controller Zoals een andere manier is om controller en weergave te binden en meestal wordt aanbevolen om te gebruiken. In principe zijn dit de twee controllerconstructies in Angular (dwz $ scope en Controller As).
Verschillende manieren om Controller te gebruiken zoals zijn -
controllerAls View Syntax
<div ng-controller="CustomerController as customer">
{{ customer.name }}
</div>
controllerAls controller-syntaxis
function CustomerController() {
this.name = {};
this.sendMessage = function() { };
}
controllerAls met vm
function CustomerController() {
/*jshint validthis: true */
var vm = this;
vm.name = {};
vm.sendMessage = function() { };
}
controllerAs is syntactische suiker boven $scope . U kunt nog steeds binden aan de weergave en nog steeds toegang krijgen tot $scope methoden. Het gebruik van controllerAs is een van de best practices die worden voorgesteld door het hoekige kernteam. Er zijn veel redenen hiervoor, maar weinigen zijn -
$scopede leden van de controller bloot aan de weergave via een intermediair object. Doorthis.*, kunnen we precies laten zien wat we van de controller willen laten zien aan de weergave. Het volgt ook de standaard JavaScript-manier om dit te gebruiken.met behulp van
controllerAssyntaxis hebben we meer leesbare code en kan de bovenliggende eigenschap worden geopend met de aliasnaam van de bovenliggende controller in plaats van met de$parentsyntaxis.Het bevordert het gebruik van binding aan een "gestippeld" object in de weergave (bijv. Klantnaam in plaats van naam), dat contextueler is, gemakkelijker te lezen is en referentieproblemen voorkomt die kunnen optreden zonder "puntjes".
Helpt voorkomen dat
$parentaanroepen worden gebruikt in Views met geneste controllers.Gebruik hiervoor een opnamevariabele wanneer u de syntaxis van de
controllerAs. Kies een consistente variabelenaam zoalsvm, wat staat voor ViewModel. Omdatthistrefwoord contextueel is en bij gebruik in een functie in een controller de context kan wijzigen. Door de context hiervan vast te leggen, voorkomt u dit probleem.
OPMERKING: met behulp van controllerAs syntaxis toevoegen aan huidige bereikreferentie naar huidige controller, dus beschikbaar als veld
<div ng-controller="Controller as vm>...</div>
vm is beschikbaar als $scope.vm .
Minification-Safe hoekcontrollers maken
Om minificatie-veilige hoekcontrollers te maken, moet u de functieparameters van de controller wijzigen.
Het tweede argument in de functie module.controller moet aan een array worden doorgegeven, waarbij de laatste parameter de controllerfunctie is en elke parameter daarvoor de naam van elke geïnjecteerde waarde.
Dit verschilt van het normale paradigma; dat neemt de controllerfunctie met de geïnjecteerde argumenten.
Gegeven:
var app = angular.module('myApp');
De controller moet er zo uitzien:
app.controller('ctrlInject',
[
/* Injected Parameters */
'$Injectable1',
'$Injectable2',
/* Controller Function */
function($injectable1Instance, $injectable2Instance) {
/* Controller Content */
}
]
);
Opmerking: de namen van geïnjecteerde parameters hoeven niet overeen te komen, maar ze worden in volgorde gebonden.
Dit zal min of meer vergelijkbaar zijn met dit:
var a=angular.module('myApp');a.controller('ctrlInject',['$Injectable1','$Injectable2',function(b,c){/* Controller Content */}]);
Het minificatieproces vervangt elk exemplaar van de app door a , elk exemplaar van $Injectable1Instance door b en elk exemplaar van $Injectable2Instance door c .
Geneste controllers
Nestelende controllers ketenen ook de $scope . Het wijzigen van een $scope variabele in de geneste controller verandert dezelfde $scope variabele in de bovenliggende controller.
.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";
};
});
Laten we nu proberen ze allebei te behandelen, genest.
<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>
Nestelende controllers hebben misschien voordelen, maar er moet met één ding rekening worden gehouden. Het aanroepen van de ngController richtlijn creëert een nieuwe instantie van de controller - die vaak voor verwarring en onverwachte resultaten kan zorgen.