AngularJS jest biblioteką JavaScript, która została utworzona i jest wspierana przez samego Google.
Głównym zadaniem tego cuda techniki, jest wprowadzenie MVC do frontendowych technologii, dodatkowo wprowadza ogrom dyrektyw, metod i wyrażeń, przez co frontend stał się o niebo przyjemniejszy.
MVC - a co to takiego?
Model-View-Controller - jest to wzorzec architektoniczny dotyczący aplikacji, posiadające graficzny interfejs użytkownika. Ładnie i profesjonalnie to brzmi, aczkolwiek samo korzystanie o niebo ułatwia życie.
MVC opiera się na 3 "dzieciach" - Modelu, Widoku i Kontrolerze. Pierwszy z nich zawiera dane. Drugi - "wygląd", a trzeci łączy pierwszy i drugi. Na przykładzie : Użytkownik aplikacji potrzebuje informacji, więc prosi kontroler o nie. Ten z kolei, pobiera je z modelu , wrzuca w widok i przekazuje użytkownikowi.
Dzięki temu wzorcowi aplikacje graficzne są "elastyczniejsze", wygodne w modyfikacjach no i co najważniejsze - profesjonalne.
AngularJS - do dzieła!
Instalacja angulara? Dziecinnie prosta
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
Oczywiście - równie dobrze możemy ściągnąć plik js angulara i wrzucić do projektu. Angular jest zwykłym plikiem javascriptowym, nie ma nic skomplikowanego w jego instalacji.
Na początku była aplikacja : ng-app
Pierwsza ważna dyrektywa -
ng-app . Jest to dyrektywa czysto "organizacyjna". Deklarujemy aplikacje, jak sama nazwa wskazuje, oraz co w aplikacji siedzi (angular ma ogromną ilość modułów, począwszy od restowych zapytań, poprzez animacjie i wygląd strony). My sprowadzimy się do "podstaw".
Utwórzmy plik html z angularem.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="test.js"></script>
</head>
<body>
</body>
</html>
Razem z nim utworzymy plik test.js . Wrzućmy do niego definicje aplikacji.
var aplikacja = angular.module('applikacja', [])
i już aplikacja w AngularJS utworzona. Przynajmniej w teorii. Teraz dodajmy aplikacje do naszej strony.
<html ng-app="applikacja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="test.js"></script>
</head>
<body>
</body>
</html>
Aplikacja gotowa. Teraz czas na deklaracje kontrolera.
Potem kontroler : ng-controller
Do naszego pliku test js, dodajmy definicję kontrolera.
aplikacja.controller('cialoCtrl', function($scope) {
});
należy się odrobinę wyjaśnienia.
aplikacja na początku, to nazwa zamiennej, do której przypisana jest
angular.module , dalej mamy słowo kluczowe
contoller, pierwszym parametrem jest nazwa kontrolera, następnym, "ciało" naszego kontrolera.
Ciało dodatkowo przyjmuje parametr
$scope ,nie jest to wymagane, parametrów może być ZERO a może być Kilkanaście, zależnie od tego, co potrzebujemy. Wspomniany wcześniej
$scope, to "przestrzeń robocza" w kontrolerze. Trzyma on wszystkie zmienne i funkcje, tak, żebyśmy mogli nimi operować w aplikacji. Dodajmy sobie KOTA i PSA, oraz nadajmy im imiona - w skrócie- otwórzmy w kontrolerze 2 obiekty. Nasz plik
test.js wygląda teraz tak:
var aplikacja = angular.module('applikacja', [])
aplikacja.controller('cialoCtrl', function($scope) {
$scope.kot = {
imie:"Kotek",
waga:120
};
$scope.pies = {
imie:"Bronek",
waga:86
};
});
Dodajmy też kontroler do naszej strony w tagu
body
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-controller="cialoCtrl">
</body>
</html>
Zaczynamy zabawę angularem.
Zacznijmy od wypisania na stronie internetowej Kota i psa. Normalnie wyglądałoby to tak:
<div class="kot">
<p>Nazwa: Kotek</p>
<p>Waga: 120 kg</p>
</div>
<div class="pies">
<p>Nazwa: Bronek</p>
<p>Waga: 86 kg</p>
</div>
Jednak z użyciem MVC i Angulara wygląda to "łatwiej".
<div class="kot">
<p>Nazwa: {{kot.imie}}</p>
<p>Waga: {{kot.waga}} kg</p>
</div>
<div class="pies">
<p>Nazwa: {{pies.imie}}</p>
<p>Waga: {{kot.waga}} kg</p>
</div>
Jak nie trudno zauważyć, do danych z modelu odwołujemy się korzystając z wyrażeń
{{zmienna ze scope}} , czyli podwójnych nawiasów klamrowych. Ale tak odwołujemy się tylko i wyłącznie, kiedy nie korzystamy z dyrektyw angulara. W przypadku angularowskich dyrektyw, nie potrzebne są
{{}}.
Czy nie wygląda to prosto?
ng-if vs ng-show
Dwie, bardzo przydatne dyrektywy. Z jednej strony, obie robią to samo, z drugiej strony jest między nimi kolosalna różnica.
Otóż
ng-show "ukrywa element", tzn dodaje do stylów "
display:none", podobnie jak
.hide() w jQuery. Natomiast
ng-if usuwa element, co nie znaczy, że nie możemy go przywrócić. Prosty przykład. Jeśli pies waży więcej, niż 120 kg, nie pokazujemy go, zostawiamy dla Siebie (tyle szczęścia...)
Zmodyfikujmy
div#kot do naszych wymagań.
<div class="kot" ng-if="kot.waga < 100">
<p>Nazwa: {{kot.imie}}</p>
<p>Waga: {{kot.waga}} kg</p>
</div>
Zapiszmy i zobaczmy, co się stało. Ojej... Kot nam znikł... Dla porównania - jeśli pies waży więcej niż 60 kg - też ma zniknąć.
<div class="pies" ng-show="pies.waga < 60">
<p>Nazwa: {{pies.imie}}</p>
<p>Waga: {{kot.waga}} kg</p>
</div>
Pies też nam znikł, jednak zajrzyjmy w kod html'a.
Pies dostał klasę,
ng-hide wówczas kiedy kod html dla kota.... znikł! Ale spokojnie, możemy go przywrócić bez odświeżania strony.
ng-model dla formularzy.
Dla formularzy istnieje specjalna dyrektywa
ng-model, dzięki której możemy "w locie" zmieniać wartości zmiennych, bez konieczności odświeżania strony i co najważniejsze, nie ingerujemy w kod html, jak to byłoby w przypadku jQuery. Wartością atrybutu
ng-model jest zmienna ze
$scope , i tutaj nie potrzebujemy klamerek do operacji na nim.
Dodajmy do strony taki mały panelek. Czy kot ma byc pokazany (checkbox) oraz imię kota.
<div>
<input type="checkbox" ng-model="pokazKota"/>Pokaz kota.
<input type="text" ng-model="kot.imie"/>Imie kota
</div>
Zauważ, że nie prosiłem o utworzenie w
$scope zmiennej
pokazKota. Czemu? Uroki JavaScriptu :)
Teraz zmieńmy warunek z wagi kota na jego pokazanie.
Nazwa: {{kot.imie}}
Waga: {{kot.waga}} kg
Odświeżmy stronę, i pobawmy się nowymi guziczkami. Po kliknięciu na checkbox'a kot pojawia się i znika, w zależności od tego, czy jest zaznaczony czy nie. Co więcej - wprowadzenie tekstu w inpucie powoduje zmianę nazwy kota. Dynamiczna, prosta strona, czyż nie wygląda pięknie? Ale może być jeszcze piękniej.
ng-repeat
A co powiesz, na dynamiczne uzupełnianie tablicy? Bez dodawania kodu html w parametrach Skryptu JS? tak - to jest angular. Ale pokażę na przykładzie.
Utwórzmy w kontrolerze tablicę z jednym kotkiem.
$scope.tablicaKotkow = [
{
imie:"Kotek",
waga:120
}
];
a na stronie - guzik "dodaj Kotka".
<button ng-click="dodajKota()">Dodaj Kotka</button>
Uprzedzam pytanie :
ng-click to dyrektywa z angulara, która działa podobnie jak
onclick w js, wykonuje się, gdy klikniemy na element. Tutaj - przekierowuje do funkcji
dodajKotka w kontrolerze. Dodajmy takową funkcję :
$scope.dodajKota = function(){
$scope.tablicaKotkow.push({imie:"Kotek",waga:120})
}
Nic trudnego - po kliknięciu ma dodać obiekt kota do tablicy z nimi.
A w widoku dodajmy pętle.
<div class="kot" ng-repeat="kot in tablicaKotkow">
Nazwa: {{kot.imie}}<br />
Waga: {{kot.waga}} kg</div>
Wartością dyrektywy
ng-repeat jest tablica. Jak widać na załączonym obrazku : wykonuj dla każdego kota, w tablicyKotkow, wypisanie imię i wagi.
co nam się ukaże po odświeżeniu? Jeden kot. A po kliknięciu? Dwa koty. A jeszcze raz? Trzy Koty. I tak dalej i tak dalej...
Moim zadaniem było pokazanie, jakim przydanym narzędziem jest AngularJS. Ma on ogromne możliwości, jeszcze więcej modułów. Jest wykorzystany przy naprawdę ogromnych i poważnych projektach, jak , jak i drobnych, małych pierdółkach.
Dziękuję za przeczytanie moich skromnych wypocin. Mam nadzieję ze odskocznia od Androida się przydała.
Zapraszam na Mojego Fb: https://www.facebook.com/pl.cheqoladowy
A poniżej, kody napisane z poradnika :)
plik html
<html ng-app="applikacja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-controller="cialoCtrl">
<div>
<input type="checkbox" ng-model="pokazKota"/>Pokaz kota.
<input type="text" ng-model="kot.imie"/>Imie kota
</div>
<div class="kot" ng-if="pokazKota">
<p>Nazwa: {{kot.imie}}</p>
<p>Waga: {{kot.waga}} kg</p>
</div>
<div class="pies" ng-show="pies.waga < 60">
<p>Nazwa: {{pies.imie}}</p>
<p>Waga: {{kot.waga}} kg</p>
</div>
<hr/>
<button ng-click="dodajKota()">Dodaj Kotka</button>
<div class="kot" ng-repeat="kot in tablicaKotkow">
<p>Nazwa: {{kot.imie}}</p>
<p>Waga: {{kot.waga}} kg</p>
</div>
</body>
</html>
plik test.js
var aplikacja = angular.module('applikacja', [])
aplikacja.controller('cialoCtrl', function($scope) {
$scope.kot = {
imie:"Kotek",
waga:120
};
$scope.pies = {
imie:"Bronek",
waga:86
};
$scope.tablicaKotkow = [
{
imie:"Kotek",
waga:120
}
];
$scope.dodajKota = function(){
$scope.tablicaKotkow.push({imie:"Kotek",waga:120})
}
});
