Autor podstrony: Krzysztof Zajączkowski

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

Layout wykonany przez autora strony, wszelkie prawa zastrzeżone. Jakiekolwiek użycie części lub całości grafik znajdujących się na tej stronie bez pisemnej zgody jej autora surowo zabronione.