AngularJS Modules

AngularJS modules definiëren een applicatie.

Een module is een container voor verschillende delen van de applicatie.

Een module is een container voor de applicatiekontroller.

Kontrolelers behoren altijd tot een module.

Maak een module

Door gebruik te maken van AngularJS functies,angular.module Maak een module aan:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" parameter verwijst naar het HTML-element waarin de applicatie zal draaien.

Nu kun je controllers, aanwijzingen, filters enz. toevoegen aan je AngularJS-applicatie.

Controller toevoegen

Voeg een controller toe aan je applicatie en gebruik ng-controller De aanwijzing verwijst naar de controller:

Voorbeeld

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>

Probeer het zelf

Je zal in het laatste deel van deze handleiding meer te weten komen over controllers.

Aanwijzingen toevoegen

AngularJS heeft een set ingebouwde aanwijzingen die je kunt gebruiken om functionaliteiten aan je applicatie toe te voegen.

Voor een volledige referentie, bezoek onze AngularJS-aanwijzing referentie.

Daarnaast kun je je eigen aanwijzingen aan je applicatie toevoegen met modules:

Voorbeeld

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "Ik ben gemaakt in een aanwijzing constructor!"
  };
});
</script>

Probeer het zelf

Je zal in het laatste deel van deze handleiding meer te weten komen over aanwijzingen.

Modulen en controllers in het bestand

Het is zeer gebruikelijk in AngularJS-applicaties om modules en controllers in JavaScript-bestanden te plaatsen.

In dit voorbeeld bevat "myApp.js" de definitie van de applicatiemodule, terwijl "myCtrl.js" de controller bevat:

Voorbeeld

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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>

Probeer het zelf

myApp.js

var app = angular.module("myApp", []);

De []-parameters in de moduledefinitie kunnen gebruikt worden om afhankelijke modules te definiëren.

Als je geen []-parameters hebt, creëer je geen nieuwe module, maar je haalt een bestaande module op.

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName= "Gates";
});

Functies kunnen de globale naamruimte vervuilen

In JavaScript moet je vermijden om globale functies te gebruiken. Ze zijn gemakkelijk overgeslagen of beschadigd door andere scripts.

AngularJS modules verminderen dit probleem door alle functies lokaal in het module te behouden.

Wanneer je de bibliotheek moet laden

Hoewel het in HTML-applicaties gebruikelijk is om scripts te plaatsen in <body> het einde van het element zeer gebruikelijk is, maar het wordt aanbevolen om <head> of <body> het beginsel van de AngularJS-bibliotheek kan laden.

Dit komt omdat je de bibliotheek moet laden voordat je angular.module aanroep.

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/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 = "Bill";
  $scope.lastName = "Gates";
});
</script>
</body>
</html>

Probeer het zelf