Dzisiejszy wpis poświęcony jest świetnemu frameworkowi JavaScript: AngularJS
Zgodnie z tym co możemy przeczytać w Wikipedii:
„AngularJS – otwarty framework oparty na języku JavaScript, wspierany i firmowany przez Google, wspomagający tworzenie i rozwój aplikacji internetowych na pojedynczej stronie. Zadaniem biblioteki jest wdrożenie wzorca Model-View-Controller (MVC) do aplikacji internetowych, aby ułatwić ich rozwój i testowanie.
Biblioteka wczytuje plik HTML zawierający dodatkowe specyficzne dla tej biblioteki tagi. Podążając za instrukcjami wydawanymi przez owe znaczniki, biblioteka przypisuje wejściowe i wyjściowe elementy strony do modelu, zapisanego jako zestaw zmiennych języka JavaScript. Wartości tych zmiennych można ustawić ręcznie lub pobrać z otrzymywanego statycznie lub dynamicznie źródła JSON-a.”
Źródło: https://pl.wikipedia.org/wiki/AngularJS
Poniżej podstawy które należy znać przed rozpoczęciem korzystania z AngularJS:
Two-way data binding
Dodanie dyrektywy ng-app do tagu w kodzie html spowoduje, że kompilator AngularJS skompiluje wszystko wewnątrz tego tagu. Zazwyczaj się stawia tę dyrektywę przy samym tagu <html> oczywiście nie jest to wymóg. Dyrektywa ng-model=”twojeImie” powoduje przypisanie wartości tego inputu do modelu. Poniżej {{twojeImie}} wyświetla zawartość. I to tyle! Wartość jest zbindowana w dwie strony. Do poniższego przykładu nie trzeba pisać nawet linijki kodu JavaScript!
<div ng-app>
<label>Imię: </label>
<input type="text" ng-model="twojeImie" placeholder="Twoje imię">
<h1>Witaj {{twojeImie}}!</h1>
</div>
Korzystanie z kontrolera
Oczywiście zazwyczaj będziemy potrzebować kontrolerów. Oto przykład jak możemy go stworzyć:
function markiAut($scope){
$scope.auta = [
{
marka: "Audi",
model: "A8"
},
{
marka: "Mitsubishi",
model: "Lancer"
},
{
marka: "Subaru",
model: "Impreza"
}
]
}
Musimy koniecznie pamiętać aby wszystkie nasze dane były przypisane do obiektu $scope. Nasz model, będący tablicą marek samochodów, musimy przypisać do scope’a, aby mógł być użyty w widoku. Dyrektywą ng-controller przypisujemy kontroler do elementu DOM podając jego nazwę. Przykład użycia w kodzie html:
<div ng-app="">
<div ng-contoller="markiAut">
<ul>
<li ng-repeat="auto in markiAut">
[{{$index + 1}}] {{auto.marka}} {{auto.model}}.
</li>
</ul>
</div>
</div>
ng-repeat to dyrektywa, pozwalająca na renderowanie obiektów będących w tablicy. Używając tej dyrektywy dostępne są specjalne właściwości:
$index – jest to numer danego rekordu renderowanego
$first – zwraca wartość bool, mówiącą czy rekord jest pierwszy
$middle – zwraca wartość bool, mówiącą czy rekord nie jest pierwszy ani ostatni
$last – zwraca wartość bool, mówiącą czy rekord jest ostatni
Podsumowanie
Przedstawione powyżej przykłady to oczywiście absolutne podstawy AngularJS, przedstawiające ułamek jego możliwości. Jednak mam nadzieje że pomogą one początkującym zacząć zabawę w tym frameworkiem i zrozumieć jego główne koncepty! Zapraszam do korzystania z AngularJS!