AngularJS Controllers
- Previous Page AngularJS Data Binding
- Next Page AngularJS Scope
AngularJS ControllersBeheer de gegevens van een AngularJS-applicatie.
AngularJS-controllers zijn reguliere JavaScript-object.
AngularJS Controllers
Een AngularJS-applicatie wordt bestuurd door controllers.
De ng-controller-instructie definieert de applicatiecontroller.
De controller wordt gecreëerd door de standaard JavaScript-object constructor JavaScript-object.
AngularJS Examples
<div ng-app="myApp" ng-controller="myCtrl"> Voornaam: <input type="text" ng-model="firstName"><br> Achternaam: <input type="text" ng-model="lastName"><br> <br> Volledige naam: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "Bill"; $scope.lastName = "Gates"; }); </script>
Applicatiebeschrijving:
Een AngularJS-applicatie wordt bestuurd door ng-app="myApp"
definitie. De applicatie loopt binnen een <div>.
ng-controller="myCtrl"
Eigenschap is een AngularJS-instructie. Het definieert een controller.
myCtrl
Een functie is een JavaScript-functie.
AngularJS gebruikt $scope
object roept de controller aan.
In AngularJS is $scope de eigenaar van het applicatieobject (alle variabelen en functies van de applicatie).
Controller in het bereik (firstName
en lastName
)om twee eigenschappen (variabelen) te maken.
ng-model
Instructies koppelen invoervelden aan controller-eigenschappen (firstName en lastName).
Controllermethoden
Het voorbeeld hierboven demonstreert een controllerobject met twee eigenschappen: lastName en firstName.
Controllers kunnen ook methoden hebben (als variabelen van functies):
AngularJS Examples
<div ng-app="myApp" ng-controller="personCtrl"> Voornaam: <input type="text" ng-model="firstName"><br> Achternaam: <input type="text" ng-model="lastName"><br> <br> Volledige naam: {{fullName()}} </div> <script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "Bill"; $scope.lastName = "Gates"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; }; }); </script>
Externe bestanden met controllers
In grotere applicaties is het gebruikelijk om controllers op te slaan in externe bestanden.
Kopieer de code tussen de <script>-tags naar een bestand genaamd personController.js in het externe bestand:
AngularJS Examples
<div ng-app="myApp" ng-controller="personCtrl"> Voornaam: <input type="text" ng-model="firstName"><br> Achternaam: <input type="text" ng-model="lastName"><br> <br> Volledige naam: {{fullName()}} </div> <script src="personController.js"></script>
Een ander voorbeeld
Voor het volgende voorbeeld maken we een nieuwe controllerbestand:
angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; });
Save the file as namesController.js:
Then use the controller file in the application:
AngularJS Examples
<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>
- Previous Page AngularJS Data Binding
- Next Page AngularJS Scope