Wprowadzenie do AngularJS

Strony internetowe mogą być statycznymi plikami pobieranymi z serwera przez przeglądarkę użytkownika. Często jednak istnieje konieczność, aby treść na nich była dynamiczna, zmieniała się w zależności od tego co robi użytkownik. Istnieją dwa podejścia:

  • Zmiany wykonywane po stronie klienta. Przeglądarka użytkownika wykonuje skrypty i dynamicznie zmienia zawartość strony.
  • Zmiany wykonywane po stronie serwera. Wygenerowana „nowa” strona przesyłana do użytkownika. Są to aplikacje internetowe (aplikacje webowe).

Kiedyś aplikacje webowe pisało się głównie wykorzystując drugie podejście. Jeśli użytkownik wykonał jakąś interakcję (np. coś kliknął), to cała strona była przeładowywana (serwer generował „nową” stronę i wysyłał użytkownikowi). Używane były tu technologie PHP, Java (np. framework Spring MVC), C# (framework ASP.NET) itd.

Oczywiście można było dodać skrypty pisane w języku JavaScript, które trochę ożywiały stronę (np. powszechne zegarki, ruszające się menu itd.). Po wprowadzeniu klasy XMLHttpRequest (technologia AJAX), JavaScript mógł również komunikować się z serwerem. Oznaczało to koniec z odświeżaniem całej strony. Po wysłaniu zapytania i otrzymania odpowiedzi, przeładowywany jest jedynie fragment strony.

Czym jest AngularJS?

AngularJS jest frameworkiem JavaScript, który ułatwia tworzenie aplikacji webowych w taki właśnie sposób. Dzięki niemu w szybki i wygodny sposób możemy tworzyć jednostronicowe aplikacje webowe (ang. single-page application, SPA). Zapewnia wiele ułatwień, które wpływają na szybkość tworzenia profesjonalnych aplikacji np. wzorzec Model-Widok-Kontroler (ang. Model-View-Controller, MVC), system szablonów, dwukierunkowe wiązanie danych (ang. two way binding), szybkie tworzenie klientów REST i wiele innych. Z pewnością o wielu z nich będziesz mógł jeszcze poczytać na tym blogu.

Skąd pobrać Angulara?

Strona domowa projektu dostępna jest tutaj: https://angularjs.org/. Za rozwój AngularJS odpowiada Google. Obecnie, gdy powstaje wiele frameworków (szczególnie JavaScript), które zyskują popularność tylko na chwilę, możemy być bardziej spokojni o los tego konkretnego, gdyż czuwa nad nim duża firma.

W chwili pisania tego wpisu, istnieją dwie gałęzie Angulara:

  • AngularJS 1 – starsza, ale bardziej stabilna gałąź. Na tej się skupimy.
  • Angular 2 – nowsza, ale zdania o niej są podzielone. Na razie odpuszczamy (zobaczymy co z nią będzie dalej).

Teraz najnowszą wersją AngularJS 1 jest 1.5.3. Możemy ją pobrać stąd:
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js
lub stąd:
https://code.angularjs.org/1.5.3/angular.min.js
Są to pliki zminifikowane (tak, żeby zajmowały mniej miejsca). Tego zazwyczaj będziemy używać.

Jeśli chcemy zobaczyć oryginalny plik (przed minifikacją), dostępny jest tutaj:
https://code.angularjs.org/1.5.3/angular.js

Zaś tutaj dostępne są dodatkowe moduły (czasem będziemy potrzebowali jakiś dodać do naszej aplikacji):
https://code.angularjs.org/1.5.3/
Jak możecie zauważyć, tam są również inne wersje, wystarczy poprzechodzić po strukturze folderów z adresu:
https://code.angularjs.org/

W kolejnych wpisach będziesz mógł znaleźć, jak napisać hello world w AngularJS oraz rozwijać aplikację webową opartą na nim.

3 responses on “Wprowadzenie do AngularJS

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *