AngularJS:n esittely

AngularJS on JavaScript-kehyksi. Se voidaan lisätä HTML-sivulle <script>-merkinnällä.

AngularJS käyttääohjeitalaajentaa HTML-ominaisuuksia ja käyttääIlmaisusitoo tiedot HTML:ään.

AngularJS on JavaScript-kehyksi

AngularJS on JavaScript-kehyksellä kirjoitettu JavaScript-kehyksi.

AngularJS jaetaan JavaScript-tiedostojen muodossa ja sitä voidaan lisätä sivulle script-merkinnällä:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>

AngularJS laajentaa HTML:ää

AngularJS käyttää ng-instruktiotLaajentaa HTML:ää.

ng-app Ohje määrittelee AngularJS-sovelluksen.

ng-model Ohje sitoo HTML-kontrollin (input, select, textarea) arvon sovelluksen tietoihin.

ng-bind Ohje sitoo sovelluksen tiedot HTML-näkymään.

AngularJS-esimerkki

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Nimi: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
</body>
</html>

Kokeile itse

Esimerkki selityksestä:

Kun sivu ladataan valmiiksi, AngularJS käynnistyy automaattisesti.

ng-app Ohje kertoo AngularJS:lle, että <div>-elementti on AngularJS Sovellusomistajan.

ng-model Ohje sitoo syötteen kentän arvon sovelluksen muuttujaan name.

ng-bind Ohje sitoo <p>-elementin sisällön sovelluksen muuttujaan. name.

AngularJS-instruktiot

Kuten näet, AngularJS-ohjeet ovat ng HTML-ominaisuuksien etuliitteet.

ng-init Ohje alustaa AngularJS-sovelluksen muuttujan.

AngularJS-esimerkki

<div ng-app="" ng-init="firstName='Bill'">
<p>Nimi on <span ng-bind="firstName"></span></p>
</div>

Kokeile itse

tai käytä kelvollista HTML:ää:

AngularJS-esimerkki

<div data-ng-app="" data-ng-init="firstName='Bill'">
<p>Nimi on <span data-ng-bind="firstName"></span></p>
</div>

Kokeile itse

Jos haluat sivun HTML:n toimivan, voit käyttää data-ng- eikä ng-.

Tutustut tarkemmin ohjeisiin tämän ohjeen lopussa.

AngularJS-expressiot

AngularJS-ilmaisu kirjoitetaan kaksoislopuksissa:{{ expression }}.

AngularJS "tulostaa" tiedot ilmaisun sijasta:

AngularJS-esimerkki

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Ensimmäinen ilmaisuni: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Kokeile itse

AngularJS-ilmaisu sitoo AngularJS-tiedot HTML:ään, samalla tavalla kuin ng-bind Ohjeiden tapa on sama.

AngularJS-esimerkki

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Nimi: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>
</body>
</html>

Kokeile itse

Tutustut tarkemmin ilmaisuihin tämän ohjeen lopussa.

AngularJS-sovellus

AngularJS ModuuliMääritä AngularJS-sovellus.

AngularJS OhjainHallitse AngularJS-sovellusta.

ng-app Ohje määrittää sovelluksen,ng-controller Ohje määrittää ohjain.

AngularJS-esimerkki

<div ng-app="myApp" ng-controller="myCtrl">
Nimi: <input type="text" ng-model="firstName"><br>
Sukunimi:<input type="text" ng-model="lastName"><br>
<br>
Koko nimi: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "Bill";
  $scope.lastName= "Gates";
});
</script>

Kokeile itse

AngularJS-moduulit määrittelevät sovelluksen:

AngularJS-moduulit

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

AngularJS-ohjaimet hallitsevat sovellusta:

AngularJS-ohjaimet

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

Tutustut tarkemmin moduuleihin ja ohjaimiin tässä opasosassa.