W tym wpisie, postaram się przybliżyć podstawowe dyrektywy, które są często wykorzystywane podczas pracy z AngularJS. Jako przykład utworzymy prostą aplikacje ToDo, w której wykorzystamy ng-show, ng-repeat, ng-click a także ng-model. Dyrektywy te są bardzo często wykorzystywane przy tworzeniu zarówno małych jak i dużych projektów.
Założenia aplikacji
Pole wprowadzające dane, a poniżej lista zadań, które jeszcze nie zostały wykonane. Zadania wykonane będą ukrywane.
Jak widać ta prosta aplikacja pokaże nam jak działają wyżej wymienione dyrektywy.
Dodatkowo, aby napisana aplikacja prezentowała się lepiej wizualnie, wykorzystamy framework Bootstrap 3.
Omówienie dyrektyw
ng-repeat – działa jak pętla, przechodząc przez wszystkie elementy tablicy.
ng-model – odpowiada za przekazanie danych z inputów do kontrolera.
ng-show, – określa, czy dany element ma zostać wyświetlony na ekranie, cz też nie.
ng-click – dyrektywa odpowiadająca za obsługę kliknięcia w element.
Implementacja aplikacji ToDo
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>AngularJS #2 </title> </head> <body> </body> </html>
Na początek tworzymy ramę dokumentu html5, który uzupełniamy o pliki .css i .jsBootstrapa. Trzeba pamiętać, aby Bootstrap działał poprawnie należy przed importem pliku .js Bootstrapa, dodać bibliotekę jQuery. Wynika to z tego, że framework cssowy, korzysta również z frameworka jQuery.
Następnie dodajemy plik AngularJS i już możemy przystąpić do pracy nad naszą aplikacją.
Utworzenie aplikacji
Na początek tworzymy moduł naszej aplikacji. O podstawach tworzenia aplikacji w AngularJS było w poprzednim wpisie Wprowadzenie do AngularJS
var app = angular.module("app", []);
Następnie tworzymy nasz kontroller.
app.controller("appCtrl", function ($scope) {
$scope.title = "ToDo";
$scope.todos = [];
}
})
Jak widzimy w kontrolerze mamy zainicjalizowane pola: title, które będzie naszym tytułem aplikacji oraz pustą tablice todos, w której będziemy przechowywać obiekty będące zadaniami do wykonania.
Teraz pozostaje nam podpiąć moduł oraz kontroler do pliku .html.
Moduł
<html lang="pl" ng-app="app">
Kontroler
<body ng-controller="appCtrl">
Kolejnym naszym krokiem, będzie utworzenie Bootstrapowego panelu, w którym będzie mieściła się cała nasza aplikacja.
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 panel panel-default">
<h1 class="text-center">{{title}}</h1>
</div>
Jak widzimy w znaczniku <h1> wypisujemy tekst zamieszczony w $scope.title.
Dyrektywy ng-model i ng-click
Teraz przejdźmy do utworzenia formularza, przez który będziemy wprowadzać nowe zadania.
<form class="form-inline" role="form"> <div class="form-group"> <input type="text" class="form-control" ng-model="name"> </div> <button type="submit" class="btn btn-default" ng-click="add()">Dodaj</button> </form>
Jest to prosty formularz, zawierający klasy bootstrapowe. Jednak wyróżnia go, użycie dwóch dyrektyw, które dziś omawiamy.
Pierwsza dyrektywa znajduję się w znaczniku <input> i jest nią ng-model. Podana nazwa w cudzysłowie jest równoznaczna z $scope.nazwa_z_cudzisłowia.
Zatem jeśli mamy ng-model=“name”, to w skrypcie jsowym, możemy odczytać wartość z tego pola formularza za pomocą $scope.name.
Dyrektywa ta służy nam do obsługi inputów, w sposób przedstawiony powyżej.
Kolejną dyrektywą użytą w powyższym fragmencie kodu jest ng-click. Jako wartość przyjmuje funkcję umieszczoną w zakresie $scope.
Funkcje widoczne dla htmla tworzymy w taki oto sposób.
$scope.add = function () {
$scope.todos.push({
"name": $scope.name,
"done": false
})
}
Zatem należy utworzyć pole w przestrzeni $scope i przypisać mu funkcję, a w jej ciele zawrzeć operacje jakie mają się wykonać po wywołaniu tej funkcji.
W tym przypadku jest to dodanie nowego elementu do tablicy todos, za pomocą metody push(). Jak widzimy każdy element tablicy to obiekt, składający się z dwóch pól: name oraz done.
Name jest to nazwa pobrana z pola tekstowego (input) za pomocą ng-model.
Done, odpowiada za określenie czy zadanie zostało już wykonane, domyślnie jest ustawione na false.
Dyrektywy ng-repeat i ng-show
Teraz pozostaje zrobić nam wyświetlanie elementów tablicy w aplikacji oraz obsłużenie kliknięcia wykonującego zadanie.
Do wyświetlania elementów tablicy wykorzystamy dyrektywę ng-repeat.
<div ng-repeat="todo in todos">
<a ng-click="done(todo.name)" ng-show="!todo.done">{{todo.name}}</a>
</div>
Wartość jaką przyjmuje ta dyrektywa jest złożona z trzech słów. Pierwsze słowo określa nazwę pojedynczego elementu, dzięki której będziemy mogli się odwołać do pojedynczego obiektu tablicy.
Słowo in jest stałą i zawsze występuje pomiędzy dwoma pozostałymi słowami.
Trzecie słowo jest to tablica z której będą pobierane elementy.
Następnie mamy znacznik <a>, który ma w sobie dwie dyrektywy. Jednak zacznijmy od tego, że link będzie zawierał w sobie nazwę zadania, pobierana ona jest za pomocą {{todo.name}}.
Po kliknięciu na zadanie, zostanie wywołana funkcja done(), która jako parametr przyjmuje nazwę zadania.
Deklaracja funkcji
$scope.done = function (name) {
$scope.todos.forEach(function (element) {
if (element.name === name) {
element.done = true
}
});
}
Mamy tutaj użytą pętle forEach, która iteruje po całej tablicy. W tej pętli mamy warunek, który jest spełniony, gdy nazwa elementu z tablicy oraz nazwa zadania przekazana jako parametr jest taka sama i tego samego typu, wtedy następuje zamiana wartości pola done, z false na true.
Pozostała nam do omówienia ostatnia już dyrektywa ng-show, która jak już napisałem na początku odpowiada za wyświetlenie danych na ekranie. Wyświetlamy tylko te dane, które mają pole done ustawione jako false. Element jest wyświetlony gdy dyrektywa ng-show przyjmuje wartość true, abyśmy to mogli osiągnąć, korzystamy z negacji !todo.done. Zatem nasza aplikacja wyświetla tylko te zadania, które jeszcze nie zostały wykonane.
Gotowy kod aplikacji
<!DOCTYPE html>
<html lang="pl" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AngularJS #2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
body {
margin-top: 20px
}
.panel-default {
padding-bottom: 20px
}
</style>
</head>
<body ng-controller="appCtrl">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 panel panel-default">
<h1 class="text-center">{{title}}</h1>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" ng-model="name">
</div>
<button type="submit" class="btn btn-default" ng-click="add()">Dodaj</button>
</form>
<div ng-repeat="todo in todos">
<a ng-click="done(todo.name)" ng-show="!todo.done">{{todo.name}}</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.js" integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller("appCtrl", function ($scope) {
$scope.title = "ToDo";
$scope.todos = [];
$scope.add = function () {
$scope.todos.push({
"name": $scope.name,
"done": false
})
}
$scope.done = function (name) {
$scope.todos.forEach(function (element) {
if (element.name === name) {
element.done = true
}
});
}
})
</script>
</body>
</html>
Efekt pracy
Podsumowanie
Poznaliśmy dziś podstawowe dyrektywy, które są zawsze wykorzystywane podczas pisania aplikacji w AngularJS. Zaprezentowany przykład jest bardzo prosty. W nauce nie chodzi o to, aby od razu tworzyć złożone aplikacje, ale by zrozumieć mechanizmy jakie wykorzystuje się w danym frameworku.
Jeśli chcesz być na bieżąco ze wszystkimi wpisami, zachęcam do polubienia mojego FanPage.
Pozdrawiam,
sirmarbug
