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.
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.
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.Nazwa: {{kot.imie}}
Waga: {{kot.waga}} kg
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})
}
});
"Jest wykorzystany przy naprawdę ogromnych i poważnych projektach, jak , jak i drobnych, małych pierdółkach." - Tylko idiota by ładował taki kombajn jak angular do małych pierdółek :)
OdpowiedzUsuńAlbo osoba, która myśli i chce Sobie ułatwić pracę.
UsuńCzarna magia. Ja już z sił opadam. Panowie, czy w tym świecie jest gdzieś jakieś polskojęzyczne środowisko to emulacji smartfona? Chciał bym testować ROMY na PC pod Win7x64 a nie ubijac fona. Wszystko o czym czytałem nie działa. Chcę stworzyć własny ROM dla Huawei G630-u20. W stocku B157 (Serbia) działa wszystko lecz chciał bym to odchudzić, graficznie przerobić i zmienić Andka z 4.3 na 5.0/5.1
OdpowiedzUsuń