AngularJS –wprowadzenie do framework-a

Slides:



Advertisements
Podobne prezentacje
20041 Projektowanie dynamicznych witryn internetowych Paweł Górczyński ASP 3.0.
Advertisements

Podstawowe wiadomości
Komponenty bazy danych Baza danych Jest to uporządkowany zbiór powiązanych ze sobą danych charakterystycznych dla pewnej klasy obiektów lub zdarzeń,
XML w zarządzaniu formularzami ubezpieczeniowymi ZUS
Zaawansowana składnia XML XML Schema
MS Access 2000 Formularze Piotr Górczyński 03/12/2003.
MS Access 2003 Kwerendy Paweł Górczyński.
Kwerendy, formularze, relacje, raporty i makra
Proste bazy danych w Excelu
BD-LAB6 Wojciech Pieprzyca
Zadania Bazy danych.
PROJEKTOWANIE TABEL W PROGRAMIE: ACCESS
Jak przeżyć w Internecie? Czyli o bezpieczeństwie słów kilka… Michał Jankowski MJ Software Solutions Services.
ADRESOWANIE WZGLĘDNE I BEZWZGLĘDNE Ćwiczenia
Centrum Kształcenia Ustawicznego im. St. Staszica w Koszalinie
ANNA BANIEWSKA SYLWIA FILUŚ
Instrukcja MILO moduł klienta.
System zamawiania on-line
Rozpoczęcie pracy z programem DAPP Optic.
Programowanie strukturalne i obiektowe
Budowanie tabel i relacji
SQL - Structured Query Language
Tworzenie programów, etapów oraz określanie wymagań etapowych
Tworzenie Aplikacji Internetowych
Tworzenie Aplikacji Internetowych dr Wojciech M. Gańcza 8.
MICROSOFT Access TWORZENIE MAKR
Formatowanie tekstu w Microsoft Word
Zawansowane techniki programistyczne
Ms Access Formularze i raporty Marzena Nowakowska KIS, WZiMK, PŚk
Temat 12: Formularze.
Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 1 Prowadzący: Dariusz Jaruga
Aplikacje internetowe
XML Publisher Przedmiot i zakres szkolenia Przedmiot i zakres szkolenia Przeznaczenie XML Publisher Przeznaczenie XML Publisher Definiowanie Definiowanie.
Wykład 6 Informatyka MPDI 3 semestr JavaScript cd.
Jak stworzyć dyplom w programie Word
LISTY HTML. Listy s ą definiowane za pomoc ą znacznika podstawowego innego dla ka ż dego rodzaju list Specyfikacja XHTML, zawiera specjalne znaczniki.
Jak przeżyć w Internecie? Czyli o bezpieczeństwie słów kilka… Michał Jankowski MJ Software Solutions Services.
PHP Formularze Damian Urbańczyk. Do czego służą? Formularze to bardzo ważne elementy stron internetowych, dzięki nim dochodzi do wymiany danych pomiędzy.
Treści multimedialne - kodowanie, przetwarzanie, prezentacja Odtwarzanie treści multimedialnych Andrzej Majkowski 1 informatyka +
Portal edukacyjny A.Ś. FORMULARZE W JĘZYKU HTML. Portal edukacyjny A.Ś. Obiekty umieszczane na stronach www Teksty Obrazy Odnośniki Tabele Ramki pływające.
PHP Operacje na ciągach znaków Damian Urbańczyk. Zabezpieczanie tekstów Pewne dane muszą być przechowywane w taki sposób, aby nie mogły się do nich dostać.
Opracowanie mgr Karol Adamczyk
Ms Access Raporty Marzena Nowakowska WZiMK, PŚk
Edytory tekstowe stron WWW
Projektowanie postaci formularza:
GENERATOR WNIOSKÓW O DOFINANSOWANIE. Generator wniosków o dofinansowanie umożliwia przygotowywanie i edycję wniosków o dofinansowanie. Jest to pierwszy.
BAZY DANYCH Microsoft Access Akademia Górniczo-Hutnicza Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii Biomedycznej Katedra Automatyki i.
Instrukcje warunkowe w php. Pętla FOR Czasem zachodzi potrzeba wykonania jakiejś czynności określoną ilość razy. Z pomocą przychodzi jedna z najczęściej.
Portal edukacyjny J A V A S C R I P T JĘZYK PROGRAMOWANIA STRON HTML Opracowała: Anna Śmigielska.
Masz pytania – zadzwoń stac. (032) / kom: Witam Państwa, na Prezentacji, pt. „Realizacja zamówienia przez klienta” „Realizacja zamówienia.
BAZY DANYCH Microsoft Access Akademia Górniczo-Hutnicza Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii Biomedycznej Katedra Automatyki i.
Korespondencja seryjna jest funkcją, która umożliwia nam stworzenie dokumentu, który zawiera ten sam typ informacji, lecz dla każdego adresata zawiera.
ASP.NET Kontrolki źródła danych i prezentacji danych w ASP.Net
ASP.NET Dostęp do bazy danych z poziomu kodu Elżbieta Mrówka-Matejewska.
Aplikacje Baz Danych ASP.NET
HTML.  Wprowadzenie  Protokół HTTP  Język HTML  Definicja typu dokumentu  Nagłówek strony  Formatowanie treści dokumentu  Definiowanie struktury.
ASP.NET Tworzenie i zarządzanie wyglądem aplikacji, tworzenie mapy witryny. Kontrolki nawigacyjne.
Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Moduł ECDL-AM5 Bazy danych, poziom zaawansowany Tabele, relacje.
Testy jednostkowe. „Test jednostkowy (unit test) to fragment kodu, który sprawdza inny fragment kodu”
Temat: Tworzenie bazy danych
ACCESS - FORMULARZE TEMAT:. Tworzenie formularza Formularz tworzony jest w celu łatwiejszego przeglądania i edytowania danych zawartych w bazie. Tworzymy.
Typy wyliczeniowe, kolekcje
Klasy, pola, obiekty, metody. Modyfikatory dostępu, hermetyzacja
Framework css Prezentacje wykonał: szymon kupper
Instrukcja obsługi panelu E-gwarancji
Ms Access - formularze Marzena Nowakowska WZiMK, PŚk
Operacje na ciągach znaków
Czy mój serwis internetowy jest dostępny dla wszystkich?
Zapis prezentacji:

AngularJS –wprowadzenie do framework-a Paweł Fiderek

Kilka słów wstępu Angular jest framework-iem napisanym w JavaScript rozszerzającym funkcjonalność atrybutów HTML; Wersja 1.0 została wydana w 2012 roku; Pracę nad projektem zostały rozpoczęte przez google w 2009 roku; Używany głównie w projektach typu single-page; „Jest hitem  ”;

Import frmaework-a do projektu Na stronie uzywamy poniższych dyrektyw (ng-directives): ng-app - definiuje aplikację AngularJS; ng-model - binduje dane z kontrolki HTML do aplikacji; ng-bind - binduje aplikację AngularJS do widoku HTML; ng-init – inicjalizuje zmienne aplikacji; ng- => data-ng- wymusza integralność framework-a z każdą stroną HTML5;

Prosty przykład Kod:

Prosty przykład Efekt:

Wyrażenia AngularJS Wyrażenia są realizowane poprzez umieszczenia go w podwójnych klamrach: {{wyrażenie}} Wyrażenia bindują dane tak samo jak (data-)ng-bind Wyrażenia są realizowane w miejscu ich umieszczenia w kodzie HTML

Wyrażenia AngularJS - Przykład

Kontrolery AngularJS Kontrolery są realizowane przez dyrektywę (data-)ng-controller Kontrolery są realizowaniu przy wczytaniu strony

Podstawowa pętla Pętle w AngularJS są realizowane poprzez dyrektywę (data-)ng-repeat (dotyczy kolekcji!)

Filtry w AngularJS Currency – formatuje liczbę do określonego formatu; Filter – wybiera podzbiór tablicy; Lowercase – formatuje tekst do małych liter; OrderBy – formatuje tablicę zgodnie z zadanym parametrem; Uppercase – formatuje napis do wielkich liter;

Przykłady filtrów

Do dzieła! Napisać funkcję Javascript zwracającą aktualny kurs dolara, euro i funta zgodnie z informacją zawartą w: http://www.nbp.pl/kursy/xml/a003z150107.xml Zaprojektować formularz używający AngularJS inicjalizujący za pomocą controlera Angular 3 input-y (z możliwością późniejszej edycji);

Do dzieła…CD Stworzyć listę towarów zawierających trzy pola: cenę jednostkową, walutę i ilość sztuk (domyślna inicjalizacja ceny i waluty oraz ilość sztuk na 0); Dodać pole sumujące ceny towarów w złotówkach ;

http Request

Tabele w AngularJS

Dyrektywa ng-disable

Ukrywanie elementów DOM

Formularze w AngularJS

Walidacja (formularze)

Select w AngularJS <!DOCTYPE html> <html ng-app=""> <head> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> <script> function userController($scope){ $scope.array = [{currency: 'USD', id:1}, {currency: 'GBP', id:2}, {currency: 'EUR', id:3}]; } </script> </head> <body ng-controller="userController"> <select id="selec" ng-model="choice" ng-options="x.id as x.currency for x in array"></select> <p>{{choice == 1 ? 'USD' : choice == 2 ? 'GBP' : choice == 3 ?'EUR':''}}</p> </body> </html>

Do dzieła 2  Przerobić opracowany w ramach poprzedniego laboratorium kalkulator zamówień na formularz. Poza dotychczasowymi polami formularz musi dać możliwość wyboru waluty z poziomu comboBox-a (select); Dodać walidację wypełnienia wszystkich pól Dodać pola zamawiający i numer telefonu które również należy sprawdzić pod kątem poprawności danych

Do dzieła 2 cd…  Formularz ponadto powinien uniemożliwić dokonanie submit-a w sytuacji gdy jakieś pole nie przejdzie procesu walidacji Należy wykorzystać mechanizm ukrywania pewnych pól, np. sumy za zakupy aż do momentu wypełnienia co wszystkich wymaganych pól przynajmniej jednego komponentu