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

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 1931 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.:

<div ng-app=""> <!-- Some AngularJS code here --> </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:

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

<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