AngularJS-modules
'n AngularJS-module definieer 'n toepassing.
Die module is 'n houer vir die verskillende dele van 'n toepassing.
Die module is 'n houer vir die toepassingsbeheerders.
Beheerders behoort altyd aan 'n module.
Die skep van 'n module
'n Module word geskep deur die AngularJS-funksie te gebruikangular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Die "myApp"-parameter verwys na 'n HTML-element waarin die toepassing sal loop.
Nou kan jy beheerders, aanwysings, filters en meer by jou AngularJS-toepassing voeg.
Voeg 'n kontroleerder by
Voeg 'n beheerder by jou toepassing, en verwys na die beheerder met die
ng-controlleropdrag:
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>
Jy sal later in hierdie handleiding meer oor beheerders leer.
Voeg 'n richtlijn by
AngularJS het 'n stel ingeboude riglyne wat jy kan gebruik om funksionaliteit by jou toepassing te voeg.
Vir 'n volledige verwysing, besoek ons AngularJS-aanwysingsverwysing .
Daarbenewens kan jy die module gebruik om jou eie riglyne by jou toepassings te voeg:
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>
Jy sal later in hierdie handleiding meer oor voorskrifte leer.
Modules en beheerders in lêers
Dit is algemeen in AngularJS-toepassings om die module en die beheerders in JavaScript-lêers te plaas.
In hierdie voorbeeld bevat "myApp.js" 'n toepassingsmodule-definisie, terwyl "myCtrl.js" die kontroleerder 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>
myApp.js
var app = angular.module("myApp", []);
Die [] parameter in die module definisie kan gebruik word om afhanklike modules te definieer.
Sonder die parameter [] skep jy nie ' n nuwe module nie, maar haal jy 'n bestaande een.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Funksies kan die globale naamruimte besoedel
Globale funksies moet in JavaScript vermy word. Hulle kan maklik deur ander skrifte oorgeskryf of vernietig word.
AngularJS-modules verminder hierdie probleem deur alle funksies plaaslik by die module te hou.
Wanneer om die biblioteek te laai
Alhoewel dit algemeen is in HTML-toepassings om skrifte aan die einde van die
<body>element te plaas, word dit aanbeveel dat u die AngularJS-biblioteek óf in die <head>óf aan die begin van die <body>.
Dit is omdat oproepe na angular.moduleslegs saamgestel kan word nadat die biblioteek gelaai is.
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>