AngularJS-modules
Een AngularJS-module definieert een applicatie.
De module is een container voor de verschillende onderdelen van een applicatie.
De module is een container voor de applicatiecontrollers.
Controllers horen altijd bij een module.
Een module maken
Een module wordt gemaakt met behulp van de AngularJS-functieangular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
De parameter "myApp" verwijst naar een HTML-element waarin de applicatie wordt uitgevoerd.
Nu kunt u controllers, richtlijnen, filters en meer toevoegen aan uw AngularJS-toepassing.
Een controller toevoegen
Voeg een verwerkingsverantwoordelijke toe aan uw applicatie en verwijs naar de verwerkingsverantwoordelijke met de
ng-controllerinstructie:
Voorbeeld
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var
app
= angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
Later in deze tutorial leer je meer over controllers.
Een richtlijn toevoegen
AngularJS heeft een set ingebouwde richtlijnen die u kunt gebruiken om functionaliteit aan uw toepassing toe te voegen.
Ga voor een volledige referentie naar onze AngularJS-richtlijnreferentie .
Daarnaast kunt u de module gebruiken om uw eigen richtlijnen aan uw applicaties toe te voegen:
Voorbeeld
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Later in deze zelfstudie leert u meer over richtlijnen.
Modules en controllers in bestanden
Het is gebruikelijk in AngularJS-applicaties om de module en de controllers in JavaScript-bestanden te plaatsen.
In dit voorbeeld bevat "myApp.js" een toepassingsmoduledefinitie, terwijl "myCtrl.js" de controller bevat:
Voorbeeld
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
mijnApp.js
var app = angular.module("myApp", []);
De parameter [] in de moduledefinitie kan worden gebruikt om afhankelijke modules te definiëren.
Zonder de parameter [] maakt u geen nieuwe module, maar haalt u een bestaande op.
mijnCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Functies kunnen de globale naamruimte vervuilen
Globale functies moeten worden vermeden in JavaScript. Ze kunnen gemakkelijk worden overschreven of vernietigd door andere scripts.
AngularJS-modules verminderen dit probleem door alle functies lokaal voor de module te houden.
Wanneer de bibliotheek laden?
Hoewel het gebruikelijk is in HTML-applicaties om scripts aan het einde van het
<body>element te plaatsen, wordt aanbevolen dat u de AngularJS-bibliotheek laadt in het <head>of aan het begin van het <body>.
Dit komt omdat aanroepen naar angular.modulealleen kunnen worden gecompileerd nadat de bibliotheek is geladen.
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>