Opisywałem już na blogu czym jest dwustronne wiązanie (ang. two way binding). Dzięki niemu, dane w widoku są wyświetlane z modelu oraz na bieżąco aktualizują się w modelu na podstawie widoku. Jest ono realizowane w AngularJS za pomocą dyrektywy ng-model:
|
1 |
<input type="text" ng-model="myText"> |
Co jeśli chcemy jakoś przetworzyć dane z modelu zanim trafią do widoku? Oraz chcemy mieć…
W naszej aplikacji możemy wpisywać tematy oraz imię i nazwisko prelegenta. Jednak tak naprawdę nic więcej się nie dzieje poza przepisaniem tych danych i dodaniem odpowiednich cudzysłowów i myślników. Dodajmy obliczanie godzin występów! Chcemy do godziny rozpoczęcia wystąpienia np. 16:50 dodać jego czas trwania np. 15 minut, zapisane w formacie 00:15. Powinniśmy otrzymać godzinę zakończenia…
W JavaScript wszystko związane z datą i godzinami praktycznie zamyka się w jednej klasie Date. Jej dokumentację możemy przeczytać na Mozilla Developer Network: Date. Obsługa czasu w JavaScript jest dosyć uboga, w szczególności w porównaniu do innych języków programowani np. w Javie, w której mamy multum przeróżnych klas do obsługi dat, godzin, stref czasowych, parserów, kalendarzy itd.…
Z poprzedniego wpisu mamy formularz, który jest połączony z listą z danymi. Dane są automatycznie przepisywane. Teraz chcielibyśmy, aby nie było ograniczenia co do wierszy. Zróbmy więc tak, żebyśmy mogli dodawać je dynamicznie, podczas działania aplikacji. Dodawanie wiersza przyciskiem Pod tabelą dodajmy przycisk:
|
1 |
<button ng-click="addItem()">Add</button> |
Skorzystaliśmy z dyrektywy ng-click, której parametrem jest przypisana funkcja addItem() (działa…
W tym wpisie pokażę jak zrobić prosty formularz w AngularJS, który będzie podpięty do listy z danymi. Wartości z pól tekstowych będą przepisywane automatycznie w miejsce wynikowe poprzez listę. Weźmy szablon aplikacji z wpisu, w którym był omówiony kontroler. Będzie to nasz punkt wyjściowy do rozbudowy aplikacji. index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Hello World AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> <script src="controller.js"></script> </head> <body ng-controller="myCtrl"> <h2>Hello World AngularJS</h2> <input type="text" ng-model="myText"> {{myResult()}} </body> </html> |
controller.js
|
1 2 3 4 5 6 7 8 9 |
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.myText = "World"; $scope.myResult = function () { return "Hello " + $scope.myText + "!"; }; }); |
Szablon formularza w tabeli…
W tym wpisie przedstawię jak napisać najprostsze Hello World w AngularJS. Na prostym przykładzie pokażę także co nam daje Angular w stosunku do użycia samego JavaScriptu. Najprostszy przykład Najprostszym przykładem kawałka kodu, który może wykonać jakieś działanie po stronie użytkownika, będzie dodanie dwóch liczb. JavaScript Zacznijmy od przykładu, jak można by to zrobić w JavaScripcie…
Strony internetowe mogą być statycznymi plikami pobieranymi z serwera przez przeglądarkę użytkownika. Często jednak istnieje konieczność, aby treść na nich była dynamiczna, zmieniała się w zależności od tego co robi użytkownik. Istnieją dwa podejścia: Zmiany wykonywane po stronie klienta. Przeglądarka użytkownika wykonuje skrypty i dynamicznie zmienia zawartość strony. Zmiany wykonywane po stronie serwera. Wygenerowana „nowa”…