AngularJS moduler

AngularJS-modul definierar ett applikation.

Modul är behållaren för olika delar av applikationen.

Modul är behållaren för applikationskontrollern.

Kontroller tillhör alltid en modul.

Skapa modul

Genom att använda AngularJS-funktioner,angular.module Skapa ett modul:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp"-parametern betyder att applikationen kommer att köra i det HTML-element som anges.

nu kan du lägga till kontrollrar, anvisningar, filter och mer i AngularJS-programmet.

lägg till kontroller

lägg till en kontroller till din applikation och använd ng-controller anvisningen refererar till kontrollern:

exempel

<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>

Prova själv

du kommer att få mer information om kontrollrar i den efterföljande delen av denna handledning.

lägg till anvisningar

AngularJS har ett antal inbyggda anvisningar som du kan använda för att lägga till funktioner till din applikation.

för en fullständig referens, besök vår AngularJS-anvisningsreferens.

du kan också använda moduler för att lägga till egna anvisningar till din applikation:

exempel

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "Jag skapades i en anvisningskonstruktör!"
  };
});
</script>

Prova själv

du kommer att få en mer detaljerad förklaring av anvisningar i den efterföljande delen av denna handledning.

moduler och kontrollrar i filen

det är mycket vanligt att placera moduler och kontrollrar i JavaScript-filer i AngularJS-program.

i detta exempel innehåller "myApp.js" definisjonen av applikationsmodulen och "myCtrl.js" innehåller kontrollern:

exempel

<!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>

Prova själv

myApp.js

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

[]-parametrar i moduldefinitionen kan användas för att definiera beroende på moduler.

om du inte har []-parametrar, skapar du inte en ny modul, utan hämtar en befintlig modul.

myCtrl.js

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

funktioner kan förorena den globala namnrymden

det är rekommenderat att undvika globala funktioner i JavaScript.

AngularJS-moduler minskar detta problem genom att behålla alla funktioner lokalt i modulen.

när biblioteket laddas

även om det är vanligt att placera skript i HTML-program <body> elementets slut är mycket vanligt, men det rekommenderas att du <head> eller <body> inledningen ladda AngularJS-biblioteket.

detta beror på att man bara kan kompilera angular.module anrop.

exempel

<!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>

Prova själv