AngularJS:n esittely
- Edellinen sivu AngularJS-opas
- Seuraava sivu AngularJS-expressiot
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>
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>
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>
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>
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>
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>
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.
- Edellinen sivu AngularJS-opas
- Seuraava sivu AngularJS-expressiot