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.…
Tworzymy stronę internetową w pliku index.html i otwieramy ją w przeglądarce, aby podejrzeć wprowadzone zmiany. Tak samo postępowaliśmy z AngularJS. O co więc tutaj chodzi? Błąd: Cross origin requests… W poprzednim wpisie dodaliśmy routing do aplikacji w AngularJS. Jeśli teraz po prostu otworzymy index.html, to przełączanie pomiędzy zakładkami w niektórych przeglądarkach nie będzie działać. Możemy sprawdzić w…
Menu, zakładki na stronie internetowej, linki do podstron. To coś jest tak naturalne, że nie wyobrażamy sobie budowania bez tego aplikacji internetowych. W HTML robi się to bardzo prosto. Po prostu wstawimy linki <a> do kolejnych plików podstrona1.html, podstrona2.html itd. Ma to jednak wady. Musimy kopiować całą zawartość strony (menu, stopka itd.), aby zmienić tylko…
W poprzedniej części poznaliśmy jak podłączyć Bootstrapa do aplikacji AngularJS. W tym zobaczymy jak wykorzystać jego możliwości i zmienić wygląd naszej aplikacji. Oczywiście strony internetowe napisane z wykorzystaniem samego Bootstrapa będą wyglądać podobnie jak inne. Dlatego nie zaleca się pozostawienia jej końcowo w takiej formie, szczególnie jeśli ma być dla klienta i użytkowników końcowych. Należałoby wtedy chociaż…
Jak szybko zrobić ładny interfejs graficzny aplikacji? Skorzystajmy z front-endowego frameworka Bootstrap. Wystarczy dodać plik z Bootstrapem, kilka klas i już mamy przyzwoity wygląd. W przyszłości z łatwością będziemy mogli rozbudowywać aplikację, a jednocześnie dbać o to, żeby wyglądała poprawnie. Stroną domową Bootstrapa jest: http://getbootstrap.com/. Istnieje książka pt. Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start! (autor:…
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…
Warszawskie Dni Informatyki to wydarzenie, które łączy konferencję o tematyce IT, warsztaty oraz giełdę pracy. Jest to wydarzenie zarówno dla studentów, jak i profesjonalistów. W tym roku WDI odbyło się w dniach 22-23 marca w gmachu Wydziału Matematyki i Nauk Informacyjnych Politechniki Warszawskiej. Panel Rektorski W przeddzień konferencji odbywa się Panel Rektorski w Senacie Rzeczypospolitej Polskiej. Jest to…
Znajdziecie tutaj szablon aplikacji w AngularJS. W poprzednim wpisie co prawda jest już Hello World, ale teraz napiszemy je z podziałem na pliki, kontrolerem i modułem, tak jak powinno to się robić w prawdziwych aplikacjach. Poznamy także czym jest obiekt $scope. Hello World w jednym pliku Przypomnijmy sobie kod Hello Word:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <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> </head> <body ng-app> <h2>Hello World AngularJS</h2> <input type="text" ng-model="myText"> {{myText}} </body> </html> |
Wynik działania: Loading plunk……