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

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

Listing 2
  1. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8"/>
  6. <script src="AngularJS.min.js"></script>
  7. </head>
  9. <body ng-app = "">
  10. <p>Imię: <input type="text" ng-model = "name"/></p>
  11. <p>Nazwisko: <input type = "text" ng-model = "surname"/></p>
  13. <p>{{ name + " " + surname}}</p>
  14. </body>
  15. </html>

Fragment powyższego kodu:

Listing 3
  1. <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.

Komentarze