AngularJS-beheerders
AngularJS-beheerders beheer die data van AngularJS-toepassings.
AngularJS-beheerders is gewone JavaScript-objekte .
AngularJS-beheerders
AngularJS-toepassings word deur beheerders beheer.
Die ng-beheerder- direktief definieer die toepassingsbeheerder.
'n Beheerder is 'n JavaScript-objek , geskep deur 'n standaard JavaScript -objekkonstruktor .
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 verduidelik:
Die AngularJS-toepassing word gedefinieer deur ng-app="myApp" . Die toepassing loop binne die <div>.
Die ng-controller="myCtrl" -kenmerk is 'n AngularJS-aanwysing. Dit definieer 'n beheerder.
Die myCtrl- funksie is 'n JavaScript-funksie.
AngularJS sal die beheerder met 'n $scope- objek oproep.
In AngularJS is $scope die toepassingsobjek (die eienaar van toepassingsveranderlikes en -funksies).
Die beheerder skep twee eienskappe (veranderlikes) in die bestek ( voornaam en achternaam ).
Die ng-model- aanwysings bind die invoervelde aan die beheerder-eienskappe (voornaam en achternaam).
Kontroleur Metodes
Die voorbeeld hierbo het 'n kontroleerdervoorwerp met twee eienskappe gedemonstreer: lastName en firstName.
'n Beheerder kan ook metodes hê (veranderlikes as funksies):
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>
Beheerders in eksterne lêers
In groter toepassings is dit algemeen om beheerders in eksterne lêers te stoor.
Kopieer net die kode tussen die <script>-merkers na 'n eksterne lêer genaamd 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>
Nog 'n voorbeeld
Vir die volgende voorbeeld sal ons 'n nuwe beheerderlêer skep:
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
Stoor die lêer as namesController.js :
En gebruik dan die kontroleerderlêer in 'n 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>