AngularJS - atrybuty ng-app, ng-model czyli tworzenie aplikacji i podstawy osadzania kodu w HTML-u

Stronę tą wyświetlono już: 1365 razy

AngularJS posługuje się własnymi atrybutami HTML-a, które skądinąd są wykorzystywane w przebiegły (żeby nie powiedzieć perfidny) sposób do realizacji zadań wszelkiej maści. Jednym z takich najbardziej podstawowych atrybutów wykorzystywanym przez AngularJS jest atrybut ng-app. A cóż za przebiegłą rolę pełni ten atrybut? Odpowiedź na to skądinąd zacne pytanie jest jedna: jest to atrybut, który w jednoznaczny sposób identyfikuje element dokumentu HTML-a, który będzie traktowany jako aplikacja właśnie Angular-a JS. O tym, do czego ten atrybut może zostać wykorzystany opowiem nieco innym razem przy okazji omawiania zagadnienia wykorzystania kontrolerów w aplikacjach Angular-a JS a na razie przejdźmy nad tym do porządku dziennego przyjmując jednak do wiadomości, że aby kod Angular-a JS był interpretowany trzeba go umieścić wewnątrz elementu HTML-a zawierającego tenże atrybut, czyli np.:

Listing 1

<div ng-app="">  </div>

Kolejnym bardzo ważnym i często wykorzystywanym atrybutem jest ng-model, który będzie przypisywany najczęściej do elementów interfejsu użytkownika, czyli typowo formularzowych kontrolek. Dzięki nadaniu takiemu elementowi atrybutu ng-model zawierającego unikalną nazwę można do zawartości danej kontrolki odwołać się w kodzie strony w następujący jakże prosty i przebiegły sposób:

Listing 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="AngularJS.min.js"></script>
</head>
<body ng-app = "">
<p>Imię: <input type="text" ng-model = "name"/></p>
<p>Nazwisko: <input type = "text" ng-model = "surname"/></p>
<p>{{ name + " " + surname}}</p>
</body>
</html>

Fragment powyższego kodu:

Listing 3

<p>{{ name + " " + surname }}</p>

to odwołanie do zawartości kontrolek. Teraz, gdy użytkownik zacznie wpisywać swoje dane automatycznie te dane zaczną się wyświetlać w powyższym fragmencie kodu. Działający kod można zobaczyć tutaj. I teraz pewnie pomyślisz sobie: jakież to proste, jakież to piękne, jakież to wspaniałe! A to dopiero początek przygody z Anguler-em JS aż strach pomyśleć, co to będzie dalej.

Propozycje książek