AngularJS moduler

AngularJS-moduler definerer en applikation.

Moduler er beholderen for forskellige dele af applikationen.

Moduler er beholderen for applikationskontrollere.

Kontroller hører altid til en modul.

Opret modul

Ved hjælp af AngularJS-funktioner,angular.module Opret en modul:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp"-parametrene refererer til HTML-elementet, hvor applikationen skal køre.

Nu kan du tilføje kontroller, instruktioner, filtrering osv. til din AngularJS-applikation.

Tilføj kontroller

Tilføj en kontroller til din applikation og brug ng-controller Instruktionen refererer til kontrolleren:

eksempel

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

Prøv det selv

Du vil finde mere information om kontroller i de senere dele af denne tutorial.

Tilføj instruktioner

AngularJS har et sæt indbyggede instruktioner, som du kan bruge til at tilføje funktioner til din applikation.

For fuld reference, besøg vores AngularJS-instruktion reference.

Desuden kan du bruge moduler til at tilføje dine egne instruktioner til din applikation:

eksempel

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "Jeg blev lavet i en instruktion konstruktør!"
  };
});
</script>

Prøv det selv

Du vil finde mere information om instruktioner i de senere dele af denne tutorial.

moduler og kontroller i filen

Det er meget almindeligt i AngularJS-applikationer at placere moduler og kontroller i JavaScript-filer.

I dette eksempel indeholder "myApp.js" applikationsmoduldefinitionen, mens "myCtrl.js" indeholder kontrolleren:

eksempel

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

Prøv det selv

myApp.js

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

[]-parametre i moduldefinitionen kan bruges til at definere afhængige moduler.

Hvis der ikke er []-parametre, skaber du ikke en ny modul, men henter en eksisterende modul.

myCtrl.js

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

Funktioner kan forurense den globale navnerum

Man skal undgå at bruge globale funktioner i JavaScript. De er nemme at overskrive eller ødelægge af andre scripts.

AngularJS-moduler reducerer dette problem ved at holde alle funktioner lokale i modulerne.

hvornår biblioteket skal indlæses

Selvom det er almindeligt at placere scripts i HTML-applikationer <body> elementets afslutning er meget almindeligt, men det anbefales, at du gør det i <head> eller <body> i begyndelsen af at indlæse AngularJS-biblioteket.

Dette er fordi kun når biblioteket er indlæst, kan man kompilere henvisninger til angular.module kald.

eksempel

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

Prøv det selv