AngularJS-controllers
AngularJS-controllers regelen de gegevens van AngularJS-applicaties.
AngularJS-controllers zijn gewone JavaScript-objecten .
AngularJS-controllers
AngularJS-applicaties worden bestuurd door controllers.
De ng-controller- richtlijn definieert de applicatiecontroller.
Een controller is een JavaScript-object , gemaakt door een standaard JavaScript - objectconstructor .
AngularJS-voorbeeld:
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.firstName
= "John";
$scope.lastName = "Doe";
});
</script>
Toepassing uitgelegd:
De AngularJS-toepassing wordt gedefinieerd door ng-app="myApp" . De applicatie draait in de <div>.
Het kenmerk ng-controller="myCtrl" is een AngularJS-richtlijn. Het definieert een controller.
De myCtrl- functie is een JavaScript-functie.
AngularJS zal de controller aanroepen met een $scope object.
In AngularJS is $scope het applicatieobject (de eigenaar van applicatievariabelen en functies).
De controller maakt twee eigenschappen (variabelen) in het bereik ( firstName en lastName ).
De ng-model- richtlijnen binden de invoervelden aan de controller-eigenschappen (firstName en lastName).
Controller-methoden:
Het bovenstaande voorbeeld demonstreerde een controllerobject met twee eigenschappen: lastName en firstName.
Een controller kan ook methoden hebben (variabelen als functies):
AngularJS-voorbeeld:
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl',
function($scope) {
$scope.firstName = "John";
$scope.lastName
= "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
Controllers in externe bestanden
In grotere toepassingen is het gebruikelijk om controllers op te slaan in externe bestanden.
Kopieer de code tussen de <script>-tags naar een extern bestand met de naam personController.js :
AngularJS-voorbeeld:
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>
Een ander voorbeeld
Voor het volgende voorbeeld zullen we een nieuw controllerbestand maken:
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
Sla het bestand op als nameController.js :
En gebruik vervolgens het controllerbestand in een toepassing:
AngularJS-voorbeeld:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>