AngularJS moduulit

AngularJS-moduuli määrittelee sovelluksen.

Moduuli on sovelluksen eri osien kontti.

Moduuli on sovelluksen ohjainten kontti.

Ohjain kuuluu aina johonkin moduuliin.

Luo moduuli

Käyttämällä AngularJS-funktiota:angular.module Luo moduuli:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp"-parametri viittaa HTML-elementtiin, jossa sovellus toimii.

Nyt voit lisätä AngularJS-sovellukseen ohjaimia, ohjeita, suodattimia jne.

Lisää ohjain

Lisää ohjain sovellukseesi ja käytä ng-controller Ohje viittaa tähän ohjaimen:

Esimerkki

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

Kokeile itse

Tutustut ohjaimiin yksityiskohtaisemmin tämän oppitunnin myöhemmin.

Lisää ohje

AngularJS:llä on joukko sisäänrakennettuja ohjeita, joita voit käyttää sovellukseesi lisätäksesi toiminnallisuuksia.

Täydellinen tietopaketti ohjeista löytyy AngularJS-ohjeistuksestamme.

Lisäksi voit käyttää moduulia lisätäksesi omia ohjeitasi sovellukseesi:

Esimerkki

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

Kokeile itse

Tutustut ohjaimiin yksityiskohtaisemmin tätä oppituntia myöhemmin.

Tiedostossa olevat moduulit ja ohjaimet

AngularJS-sovelluksissa on yleistä sijoittaa moduulit ja ohjaimet JavaScript-tiedostoihin.

Tässä esimerkissä "myApp.js" sisältää sovellusmoduulin määrittelyn ja "myCtrl.js" sisältää ohjaimen:

Esimerkki

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

Kokeile itse

myApp.js

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

Moduulin määrittelyssä olevat []-parametrit voidaan käyttää riippuvuusmoduulien määrittämiseen.

Jos sinulla ei ole []-parametreja, et luoda uutta moduulia, vaan haet olemassa olevaa moduulia.

myCtrl.js

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

Funktiot voivat saastuttaa globaalin nimeäspacesin

Vältä käyttämästä globaaleja funktioita JavaScriptissä. Ne ovat helposti korvattavissa tai tuhottavissa toisilla skripteillä.

AngularJS-moduuli vähentää tätä ongelmaa säilyttämällä kaikki funktiot moduulin paikallisesti.

milloin kirjasto ladataan

Vaikka HTML-sovelluksissa on yleistä sijoittaa skriptit <body> elementin loppuun on yleistä, mutta suositellaan, että <head> tai <body> alussa AngularJS-kirjaston lataamista.

Tämä johtuu siitä, että AngularJS-kirjaston lataamisen jälkeen voi kääntää angular.module kutsusta.

Esimerkki

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

Kokeile itse