Angular JS: Wstęp, tutorial część 1

W poniższym wpisie chciałbym przybliżyć jedną z bardziej popularnych technologii frontendowych – Angular JS. Technologia ta mimo już swoich kilku lat na karku jest jednym z najpopularniejszych narzędzi do tworzenia logiki systemu po stronie klienta.

Jej cechą charakterystyczną jest możliwość upiększania kodu HTML o nowe funkcjonalności, swoiste wzbogacenie kodu. Pozwala to na tworzenie zaawansowanych rozwiązań również po stronie frontendu.

W obecnej chwili mamy możliwość instalacji i pobrania Angulara w dwóch wersjach. Pierwszą z nich jest nowa wersja 2.0, czyli najnowsze dziecko programistów Google’a, my zajmiemy się wersją 1.6, czyli wciąż najpopularniejszą i najchętniej wykorzystywaną wersją.

Angular cechuje:

  • połączenie kodu HTML z logiką aplikacji napisaną w JS, Angular wykorzystuje własną sieć atrybutów i znaczników służącą do modyfikacji elementów DOM strony internetowej.
  • wiązania – Angular bezpośrednio wiąże dane aplikacji internetowej z odpowiednim elementem widoku, w przypadku wiązania dwukierunkowego wszelkie zmiany w widoku powodują zmianę wartości zmiennych, podobnie wszelkie zmiany w wartości zmiennych w logice aplikacji skutkują zmianami w warstwie prezentacji
  • korzystanie z danych w postaci JSON
  • korzystanie z wzorca MVC
  • luźne wiązania elementów poprzez wykorzystanie Dependency Injection:
  1. Instalacja i set up
    Najprostszym sposobem instalacji Angular JS jest dodanie biblioteki:
    <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js”></script>

do naszego pliku HTML. W czasie prac developerskich lepszym podejściem jest import pliku nieskompresowanego:
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js”></script>

Dzięki temu w przypadku wystąpienia błędu, konsola pokaże nam zdecydowanie dokładniejsze informacje.

Czas zacząć budować projekt, tylko od programisty zależy jaką strukturę plików wybierze, ja zdecydowałem się na stworzenie dwóch katalogów: views i js.

katalog views – będzie przechowywał widoki

katalog js – będzie przechowywał pliki JavaScript, w tym nasz kod

Stwórzmy szkielet naszej aplikacji i napiszmy prosty program Hello World:

views/hello.html:

Plik składa się z kilku elementów, w pierwszej linijce dodajemy bibliotekę Angulara, w kolejnej importujemy nasz plik JavaScript z kontrolerem o nazwie helloController.js

Po dodaniu skryptów możemy przejść do samego kodu HTML. W znaczniku HTML dodajemy atrybut ng-app, który definiuje jakiego modułu będziemy w danym kodzie używać. Nazwijmy go ‘HelloApp’. Kolejne kroki to definicja kontrolera, który zostaje przypisany jako atrybut do znacznika DIV.

Co ważne w wersji 1.2 Angular wprowadził możliwość tworzenia aliasów, typu ‘Controler as NazwaControlera’. Takie odwołanie stoi w opozycji do zakresów, które do tej pory królowały. Oba podejścia mają swoje plusy i minusy, jednak jako, że Google w Angular 2 będzie używało tylko tego pierwszego podejścia, ja również od razu będę używał aliasów i dyrektywy ‘this’. Ale o tym później.

Na razie tworzymy nasz plik HTML i  w nagłówku H1 umieszczamy odwołanie do naszego kontrolera wraz z odwołaniem do jego pola o nazwie ‘title’:

Jak widać odwołania do wartości przekazywanych do widoku w Angularze umieszczane są w podwójnych nawiasach klamrowych.

Mając gotowy dokument HTML, musimy zaimplementować sam kontroler, ale tego już dokonujemy w pliku:
js/helloController.js

W pliku tym definiujemy nowy moduł o nazwie HelloApp (zgodny z tym co podaliśmy w pliku HTML). Definiujemy również nowy kontroler, którego ciałem jest funkcja przypisująca zmiennej title wartość ‘Witaj swiecie’.

Warto dodać, iż zamiast użycia ‘this’ możemy użyć również usługi ‘$scope’, którą musimy dodać przez dependency injection:

Wtedy też w naszym pliku html użylibyśmy zapisu:

Oba sposoby są poprawne, ale w tym i następnych wpisach będę trzymał się pierwszego podejścia, które lepiej sprawuje się przy kilku kontrolerach, a także będzie/jest wiodącym rozwiązaniem w Angular 2.

Tak czy inaczej, po uruchomieniu pliku views/hello.hml naszym oczom powinien pokazać się napis witaj świecie:

DEMO

ŹRÓDŁO

Jak widać pierwsza instalacja Angulara jest banalnie prosta, podobnie stworzenie i wywołanie hello world nie przysparza dużych problemów. W kolejnym wpisie postaram się prostą interakcję z użytkownikiem i wiązanie pomiędzy kontrolerem a widokiem HTML.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.