AngularJS Inleiding
- Vorige pagina AngularJS Cursus
- Volgende pagina AngularJS Expressies
AngularJS is een JavaScript-kader. Het kan worden toegevoegd aan een HTML-pagina met een <script>-tag.
AngularJS doet dit doorInstructieHet heeft HTML-eigenschappen uitgebreid en gebruiktUitdrukkingBindt data aan HTML.
AngularJS is een JavaScript-kader
AngularJS is een JavaScript-kader geschreven in JavaScript.
AngularJS wordt als JavaScript-bestand verdeeld en kan worden toegevoegd aan een webpagina met een script-tag:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
AngularJS heeft HTML uitgebreid
AngularJS gebruikt ng-instructieHet heeft HTML uitgebreid.
ng-app De instructie definieert een AngularJS-toepassing.
ng-model De instructie bindt de waarde van de HTML-knoppen (input, select, textarea) aan de toepassing data.
ng-bind De instructie bindt de toepassing data aan de HTML-weergave.
AngularJS Voorbeelden
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
Voorbeeldverklaring:
Wanneer de webpagina is geladen, start AngularJS automatisch.
ng-app De instructie vertelt AngularJS dat het <div>-element een AngularJS Toepassingvan de "eigenaar".
ng-model De instructie bindt de waarde van het ingevoerde veld aan de toepassing variabele. name.
ng-bind Commando's binden de inhoud van het <p>-element aan de applicatievariabele name.
AngularJS Directieven
Zoals je kunt zien, zijn AngularJS commando's met ng voorvoegsels van HTML-eigenschappen.
ng-init Commando's initialiseren AngularJS applicatievariabelen.
AngularJS Voorbeelden
<div ng-app="" ng-init="firstName='Bill'"> <p>Naam is <span ng-bind="firstName"></span></p> </div>
of gebruik geldige HTML:
AngularJS Voorbeelden
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>Naam is <span data-ng-bind="firstName"></span></p> </div>
Als je de HTML-pagina wilt laten werken, kun je data-ng- in plaats van ng-.
Je zult later in deze handleiding meer te weten komen over commando's.
AngularJS Expressies
AngularJS expressies worden geschreven binnen dubbele rechte haken:{{ expressie }}.
AngularJS zal de gegevens "uitvoeren" op de plek waar de expressie zich bevindt:
AngularJS Voorbeelden
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Mijn eerste expressie: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS expressies binden AngularJS gegevens aan HTML, vergelijkbaar met ng-bind Op dezelfde manier als commando's.
AngularJS Voorbeelden
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Je zult later in deze handleiding meer te weten komen over expressies.
AngularJS Applicaties
AngularJS ModuleDefinieer AngularJS applicaties.
AngularJS ControllerBeheer AngularJS applicaties.
ng-app Commando definieert een applicatie,ng-controller Commando definieert een controller.
AngularJS Voorbeelden
<div ng-app="myApp" ng-controller="myCtrl">
Naam: <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>
AngularJS Modules definiëren de applicatie:
AngularJS Modules
var app = angular.module('myApp', []);
AngularJS Controllers beheersen de applicatie:
AngularJS Controllers
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
U zult in dit cursus later meer informatie vinden over modules en controllers.
- Vorige pagina AngularJS Cursus
- Volgende pagina AngularJS Expressies
