AngularJS to jeden z frameworków, który opiera się na języku programowania JavaScript. Jego pierwsze wydanie ukazało się w 2009 roku dzięki inżynierom z Google. Służy on programistom głównie do szybkiego i prostego budowania aplikacji internetowych. AngularJS jest chętnie wykorzystywany w programowaniu za sprawą wbudowanych funkcjonalności, dzięki którym programiści zaoszczędzają dużo czasu. Jest to model, który opiera się na wcorcu MVW (Model-View-Whatever), jednocześnie pozwalając na pogodzenie JavaScript oraz wzorca MVC (Model-View-Controll). Warto zaznaczyć, że wzorzec MVC jest wdrażany do aplikacji w celu ułatwienia testowania jej ale także w celu dynamicznego rozwijania.
Oprócz tego framework ten posiada wbudowany system szablonów oraz umożliwia świetną obsługę elementów DOMu (m.in. Two-Way Data Binding, Dirty Checking). Two-Way Data Binding to ogólnie mówiąc dwukierunkowe wiązanie danych. Dodatkowo możemy w prosty sposób manipulować danymi co jest zdecydowanie jego duży plusem. Natomiast Dirty Checking pozwala nam na skuteczne monitorowanie zmian zachodzących w modelu. AngularJS wykona powyższe sprawdzanie wewnątrz jego pętli zdarzeń, by upewnić się czy wszystko jest spójne. Jedną wyróżniającą cechą AngularJS jest to, że posiada on swój własny kompilator HTML. Dzięki temu programując możemy wdrażać w nasz HTML nowe funkcjonalności czy zachowania.
Głównymi funkcjonalnościami AngularJS są na pewno dyrektywy. Za ich pośrednictwem programista może w łatwy sposób „nauczyć” / wdrożyć w HTML nowe sztuczki co wpływa na budowanie między innymi reużywalnych komponentów. Kolejnym ważnym mechanizmem frameworka jest Data binding czyli wcześniej wspomniane dwukierunkowe wiązanie danych. Umożliwia on aplikacjom w intuicyjny sposób modyfikować oraz prezentować zawarte w nich dane. Dodatkowo pozwala na oddzielenie logiki aplikacji od interfejsu użytkownika.
Następnym ważnym elementem są filtry, które służą do modyfikacji danych wejściowych włącznie z ich sortowaniem oraz formatowaniem. Jedną z podstawowych funkcjonalności AngularjS są również moduły oraz kontrolery. Dzięki modułom programista może bez problemu podzielić aplikację na znacznie mniejsze i zdecydowanie łatwiejsze w zarządzaniu fragmenty. W celu wyjaśnienia warto wspomnieć, że naszym modułem może być wiele elementów, między innymi wcześniej wspomniane dyrektywy czy też kontrolery, serwisy a nawet sama aplikacja jest pewnego rodzaju modułem. Wracając do kontrolerów- są one pewnego rodzaju łączeniem naszych modułów z widokami, które umożliwiają obsługę interakcji z użytkownikami. Kontroler to tak zwane serce funkcjonalności i między innymi odpowiadają za pobieranie danych oraz zasilanie nimi modelu. W kontrolerach znajduje się również jeden z ważnych elementów frameworka, czyli $scope. Jest to specjalny obiekt w którym są przechowywane hierarchicznie wszelkie dane, które tworzy nam kontroler.
Również ważną cechą AngularJS jest wykorzystywanie routingu czyli ścieżek (routes). Ścieżki te są głównym elementem SPA (Single-Page Applications), który pozwala na symulowanie przechodzenia między różnymi stronami ale także wpływa na sprawność podziału aplikacji na logiczne fragmenty. Natomiast SPA to pewnego rodzaju aplikacja internetowa, która ukazywana jest użytkownikowi za pośrednictwem jednego HTML’a strony. Dzięki temu wpływa na elastyczność i dynamiczność strony.
Warto na koniec wspomnieć także o jego niektórych wadach. Między innymi wydajność AngularJS pozostawia wiele do życzenia. Jego minusem jest także konieczność ładowania wszystkich skryptów jednocześnie podczas uruchamiania aplikacji co może być dość uciążliwym faktem. Programiści napotykają się z problemami podczas początkowo łatwej nauki tego frameworka, ponieważ jak się okazuje nie zawsze dostęp do aktualnej dokumentacji był taki prosty i przejście na poziom eksperta zwykle było bardzo czasochłonne.
Przykładowy kod w AngularJS
AngularJS Przykład #1
angular.module('F1FeederApp.controllers', []).
controller('driversController', function($scope) {
$scope.driversList = [
{
Driver: {
givenName: 'Sebastian',
familyName: 'Vettel'
},
points: 321,
nationality: "German",
Constructors: [
{name: "Red Bull"}
]
},
{
Driver: {
givenName: 'Robert',
familyName: 'Kubica'
},
points: 210,
nationality: "Polish",
Constructors: [
{name: "BMW Sauber"}
]
}
];
});