Angular 1.x, pomoc do lab.

Transkrypt

1 ngular 1.x, pomoc do lab. 1/27 Angular 1.x, pomoc do lab. Tworzenie serwisów Web 2.0 dr inż. Robert Perliński Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 5 kwietnia 2017

2 Angular 1.x, pomoc do lab. 2/27 Plan prezentacji 1 Angular Instalacja Hello World Moduły Wyrażenia Kontroler, dyrektywa ng-controller Filtry Dyrektywy show, hide, repeat, src click, init, class, model Internacjonalizacja i lokalizacja

3 Angular 1.x, pomoc do lab. 3/27 AngularJS - wersja Strona projektu: Dokumentacja: Tutorial: Przewodnik dla developerów: Kurs na CodeSchool: Tutorial na W3C:

4 Angular 1.x, pomoc do lab. 4/27 Instalacja najnowszej wersji AngularJS Pobieramy AngularJS w wersji 1.6.3: ze strony z Google CDN: korzystając z NPM: npm install angular@1.6.3, korzystając z Bower a: bower install angular#1.6.3, Dołączamy moduł angular-animate.js do naszego pliku HTML: <script src=" albo <script src="angular.min.js"></script> Podłączamy aplikację AngularJS do naszej strony (dowolny znacznik): <!DOCTYPE html> <html ng-app="hello"> <head>... </head> <body>... </body> </html>

5 Angular 1.x, pomoc do lab. 5/27 Hello World - brak jakiegokolwiek modułu index.html <!doctype html> <html ng-app> <head> <script src=" <link rel="stylesheet" href=" </head> <body> <div> <label>imię:</label> <input type="text" ng-model="twojeimie" placeholder="wpisz tutaj swoje imię"> <hr> <h1>witaj {{twojeimie}}!</h1> </div> </body> </html>

6 Angular 1.x, pomoc do lab. 6/27 Hello World - główny moduł aplikacji app.js var app = angular.module('hello', [ ]); index2.html <!DOCTYPE html> <html ng-app="hello"> <head> <script src="angular.min.js"></script> <script src="app.js"></script> </head> <body> <h2>{{4 + 6 * 2}}</h2> </body> </html> Co się pojawi na stronie?

7 Angular 1.x, pomoc do lab. 7/27 Moduły app.js Moduły są przestrzenią, w którym nasza aplikacja się znajduje. Moduł to jakiś nasz zakapsułkowany fragment funkcjonalności. Moduły zawierają właściwości, którym przypisujemy funkcje albo dane, np. this.produkt = lampa; W modułach podajemy zależności jakie są w naszej aplikacji, np. moduł a może zależeć od modułów b i c. var app = angular.module('hello', [ ]); angular - oznacza bibliotekę AngularJS, z której korzystamy hello - nazwa nowo tworzonego modułu [ ] - tutaj określamy zależności, nie można pominąć tego argumentu, nawet jeśli moduł nie jest zależny od innych

8 Angular 1.x, pomoc do lab. 8/27 Dyrektywa - ng-app Dyrektywy są atrybutami znaczników HTML, które włączają jakiś przypisane im działanie JavaScript. Dyrektywa ng-app: podłącza moduł aplikacji do strony, uruchamia moduł kiedy strona jest wczytywana, moduł jest w pliku JS dołączonym do strony (app.js). <!DOCTYPE html> <html ng-app="hello"> <head> <script src="angular.min.js"></script> <script src="app.js"></script> </head> <body>... </body> </html>

9 Angular 1.x, pomoc do lab. 9/27 Hello World - opis ng-app - dyrektywa, która tworzy aplikację Angular kiedy strona jest wczytywana: <html lang="pl" ng-app="hello"> należy też dołączyć bibliotekę Angular: <script src="angular.min.js"></script> a także plik z utworzonym modułem: <script src="app.js"></script> w pliku app.js jest definicja modułu, który nic nie robi, ale dołączony pozwala traktować cały kod wewnątrz elementu, do którego jest dołączony jako aplikację Angular var app = angular.module('hello', [ ]); teraz w zakresie zancznika <html> można używać wyrażeń, np.: {{(3+5*4)/2}} - otrzymamy wartość 11.5 {{ Hello +" World"}} - Hello World

10 Angular 1.x, pomoc do lab. 10/27 Wyrażenia Wyrażenia pozwalają na wyświetlanie różnych danych na stronie. {{4+6}} - operacje numeryczne, tutaj dodawanie, {{"Hello" + " World"}} - Hello World - operacje na napisach, {{3.1*12 currency}} - $ operacja numeryczna z filtrem walutowym (internacjonalizacja), {{sklep.produkt.opis}} - Treść opisu... - wyświetla zawartość pola opis właściwości produkt kontrolera sklep, {{ zm[index]>2? 100 : 0.12 }} - z wyjątkiem operatora?: nie można kontrolować przepływu sterowania, {{::nazwa}} vs {{nazwa}} - :: przed nazwą zmiennej - jednokrotne wiązanie, po ustalonej wartości takie wyrażenia nie zmienią już swojej wartości - dla zwiększenia wydajności wtrony.

11 Angular 1.x, pomoc do lab. 11/27 Kontroler W kontrolerze definiujemy zachowanie aplikacji poprzez definiowanie funkcji i zmiennych. Kontroler pozwala nam na pracę z danymi, które chcemy wyświetlać na stronie. Kilka różnych kontrolerów może być zdefiniowanych w jednym pliku *.js. Każdy kontroler powinien odpowiadać za jakąś logiczną całość - nie może być jeden kontroler do wszystkiego. Do połączenia kontrolera ze stroną HTML wykorzystujemy dyrektywę ng-controller, np. ng-controller="panelcontroller as panel" Sekcje inicjalizacji zmiennych i konfiguracji umieszcza się w kontrolerze.

12 Angular 1.x, pomoc do lab. 12/27 IIFE IIFE - Immediately Invoked Function Expression samowywołujące się funkcje anonimowe == wyrażenie funkcyjne natychmiastowo wywoływane, wzorzec projektowy języka JavaScript, pozwala tworzyć lokalny zasięg używając zasięgu funkcji, nie zaśmiecamy przestrzeni globalnej, zmienne znane tylko wewnątrz funkcji. (function() { // raz wywoływany kod we własnej przestrzeni })(); (function(a, b) { // a == 'hello' // b == 'world' })('hello', 'world');

13 Angular 1.x, pomoc do lab. 13/27 Dyrektywy - ng-controller ng-controller - pozwala dołączyć kontroler do naszego szablonu HTML (do jakiegoś znacznika, do fagmentu drzewa DOM) z jakimś aliasem, którego będziemy używać. ng-controller dołącza funkcje kontrolera do strony. Podajemy nazwekontrolera, słowo kluczowe as oraz alias, którego będziemy używać. Zasięg kontrolera jest tylko wewnątrz takiego znacznika, do którego został przypisany. <div ng-controller="hellocontroller as hello"> <h3>{{hello.produkt.nazwa}}</h3> <code>{{hello.produkt.cena currency}}</code> <p>{{hello.produkt.opis}}</p> </div>

14 Angular 1.x, pomoc do lab. 14/27 Kontroler - przykład Kontroler jest dodawany do naszej aplikacji: app.controller(...); Cały moduł wewnątrz autoamtycznie wywoływanej funkcji anonimowej. Tworząc kontroler podajemy jego nazwę, tutaj HelloController i jego zawartość jako wnętrze funkcji anonimowej Poniżej w kontrolerze utworzono zmienną produkt, której przypisano obiekt ciastko - jego zawartość będzie wyświetlana na stronie. (function(){ var app = angular.module('hello', [ ]); app.controller('hellocontroller', function(){ this.produkt = ciastko; }); var ciastko = { nazwa: 'Ciasteczka', cena: 2.95, opis: 'Smaczne i zdrowe' } })();

15 Angular 1.x, pomoc do lab. 15/27 Kontroler - przykład Dyrektywa ng-controller pozwala na wykorzystanie zmiennych kontrolera na stronie. Korzystamy tutaj z aliasu hello, który jest przypisany nazwie kontrolera, tutaj HelloController. Wyrażenia pozwalają wyświetlić zawartość obiektu produkt. <div ng-controller="hellocontroller as hello"> <h3>{{hello.produkt.nazwa}}</h3> <code>{{hello.produkt.cena currency}}</code> <p>{{hello.produkt.opis}}</p> </div>

16 Angular 1.x, pomoc do lab. 16/27 Filtry Filtry: wykorzystujemy za pośrednictwem symbolu (jak potoki w linux ie). Angular ma kilka filtrów. W widoku wykorzystujemy je w następująco: // Proste zastosowanie {{ wyrażenie filtr }} // Przetwarzanie potokowe {{ wyrażenie filtr1 filtr2... }} // Wykorzystanie argumentów (opcji) {{ wyrażenie filtr:argument1:argument2:... }} Można ich używać: w szablonie widoku, kontrolerach, usługach czy dyrektywach. Istnieje możliwość definiowania własnych filtrów ($filterprovider).

17 Angular 1.x, pomoc do lab. 17/27 Lista filtrów I currency - filtr walutowy z internacjonalizacją; wyświetalnie walut, filtr automatycznie dodaje miejsca po przecinku i oznaczenie waluty {{ wyrażeniewalutowe currency : symbolwaluty : miejscapoprzec}} {{7 currency}} - 7,00 zł {{ currency:'pln':1}} - 14,0 PLN date - filtr wyświetlania daty (obiekt daty, timestamp albo string) {{ wyrażeniedatyczasu date : format : strefaczasowa}} {{' ' h:mma'}} - 12:27PM {{sklep.data date:"mm-dd-yy 'godz.' h:mm:ss"}} godz. 1:09:29

18 Angular 1.x, pomoc do lab. 18/27 Lista filtrów II filter - wybiera podzbiór z tablicy i zwraca go jako nową tablicę {{ wyrażenietablica filter : wyrażenie : komparator : dowolnyklucz }} <div ng-init="friends = [{name:'john', phone:' '}, {name:'mary', phone:'800-big-mary'}, {name:'mike', phone:' '}, {name:'adam', phone:' '}, {name:'julie', phone:' '}, {name:'juliette', phone:' '}]"> </div> {{friends filter:12:false}} - [{"name":"john","phone":" "}] wyrażenie - predykat określający, który obiekt tablicy ma przejść dalej przez filtr komparator - określa sposób porównywania zawartości tablicy i wyrażenia: function(actual, expected) - funkcja przyjmująca obiekt i wyrażenie zwracająca true kiedy obiekt z tablicy będzie spełniał warunek wyrażenia true - dokładne, skrót dla: function(actual, expected) { return angular.equals(actual, expected)} false - wyszukiwanie dopasowanego fragmentu bez rozróżnienia wielkości znaków

19 Angular 1.x, pomoc do lab. 19/27 Lista filtrów III json - konwertuje obiekty JavaScript do formatu json, domyślnie 2 spacje {{ wyrażenieobjektjs json : liczbaspacji}} <pre id="custom-spacing">{{ {'name':'value', age:12} json:4 }}</pre> { } "name": "value", "age": 12 limitto - ograniczenie wyświetlanego napisu {{ wyrażeniewejściowe limitto : długośćnawyjściu : początek}} {{'Slonce jest dzisiaj wysoko.' limitto:4}} - Slon <br> {{'Slonce jest dzisiaj wysoko.' limitto:4:7}} - jest <br> {{'Slonce jest dzisiaj wysoko.' limitto:-4}} - oko.<br> {{'Slonce jest dzisiaj wysoko.' limitto:-4:6}} - once<br> {{'Slonce jest dzisiaj wysoko.' limitto:-4:-6}} - aj w<br> <div ng-repeat="rzecz in sklep.produkty limitto:3"> - tylko 3 elementy lowercase - zmiana na małe litery {{'Skrót JavaScript...' lowercase}} - skrót javascript...

20 Angular 1.x, pomoc do lab. 20/27 Lista filtrów IV number - formatuje liczby jako napisy z liczbą miejsc po przecinku {{ wyrażenieliczbowe number : miejscapoprzecinku}} <span>{{ number }}</span> - 123,457 <span>{{ number:0}}</span> <span>{{ number:4}}</span> ,4568 orderby - wyświetlanie według określonego porządku {{ obiektdoposortowania orderby : wyrażenie : odwóćkolejność}}  <div ng-repeat="rzecz in sklep.produkty orderby:'cena'">  <div ng-repeat="rzecz in sklep.produkty orderby:'-nazwa'"> <div ng-repeat="rzecz in sklep.produkty orderby:'nazwa':true"> uppercase - zmiana na duże litery {{'Ala ma kota' uppercase}} - ALA MA KOTA

21 Angular 1.x, pomoc do lab. 21/27 Dyrektywy - ng-show, ng-hide ng-show - pokazuje element HTML (gałąź drzewa DOM) kiedy wartość wyrażenia jest prawdziwa, np.: ng-show="sklep.produkt.dostepny" Jeśli pola dostepny w ogóle brak, to dyrektywa ng-show uzna brak pola jako false i nie pokaze danego elementu. ng-hide - ukrywa element kiedy wartość wyrażenia jest prawdziwa. ng-show/ng-hide - pokazuje/ukrywa jakiś fragment drzewa DOM. Można użyć na przykład do ukrycia galerii kiedy tablica images będzie pusta: <div ng-show="product.images.length">... </div> W dyrektywach wyrażenia można łączyć warunkami logicznymi z mniejszych wyrażeń, np.: ng-show=" komentarz.ocena>0 komentarz.tresc.length>0 komentarz.autor.length>0"

22 Angular 1.x, pomoc do lab. 22/27 Dyrektywy - ng-repeat ng-repeat - dyrektywa tworzy instancje przypisanego jej szablonu (zawartość znacznika) tyle razy, ile posiada elementów w kolekcji, którą iteruje. Składnia: ng-repeat="nazwazmiennej in kolekcja" nazwazmiennej przechowującej kolejne elementy kolekcji, słowo kluczowe in, kolekcja - tablica, po której iterujemy. Każda instancja ma swój własny zasięg, w którym zmienna wykorzystana w pętli ma wartość odpwiedniego elementu kolekcji. Można wykorzystwać specjalne właściwości, np. $index która zwraca numer elementu w kolekcji (0..length-1) Przykłady: ng-repeat="produkt in sklep.produkty" <p ng-repeat="aa in [3,4,5,6,7,8]"> {{aa}} - {{$index}} </p> <p ng-repeat="(aa, bb) in {'a':123, 'b':234, 'c':456}"> {{aa}} - {{bb}} - {{$index}} </p>

23 Angular 1.x, pomoc do lab. 23/27 Dyrektywy - ng-src ng-src - zastępuje zwykły zapis w <img src="..." /> Wykorzystujemy wyrażenia np. {{produkt.obrazy[0].caly}} Wczytywanie obrazów odbywa się zanim zadziała analiza wyrażeń w Angular. Trzeba użyć dyrektywy ng-src. Przykład: <img src="{{rzecz.obrazy[0].caly}}" /> <img ng-src="{{rzecz.obrazy[0].ikona}}" />

24 Dyrektywy - ng-click ng-click - ta dyrektywa przyjmuje wyrażenie, które musi zostać wykonane, obliczone. Można tutaj zmiennej przypiswyać różne wartości. <h1>karty w Twitter Bootstrap</h1> <section> <ul class="nav nav-pills"> <li> <a href ng-click="tab = 1">Opis</a></li> <li> <a href ng-click="tab = 2">Specyfikacja</a></li> <li> <a href ng-click="tab = 3">Przegląd</a></li> </ul> <p>kliknięto kartę nr. {{tab}}</p> </section> Takie wyrażenia definiują dwukierunkowe wiązania danych: 1 kliknięcie powoduje zmianę wartości zmiennej tab, 2 wartości wyrażeń są ponownie wyznaczane kiedy właściwość ze zmienną się zmieni (np. po kliknięciu). Tak więc wyrażenie śledzi kiedy zmieni się wartość tab i wtedy, kiedy się zmieni, to zmiana jest od razu aktualizowana na stornie. Angular 1.x, pomoc do lab. 24/27

25 Angular 1.x, pomoc do lab. 25/27 Dyrektywy - ng-init ng-init - pozwala na określenie wartości wyrażenia w danym zasięgu - możemy zmiennej przypisać wartość. Można wykorzystać do określenia wartości zmiennej przy przeładowaniu strony. Dobrze nadaje się prototypowania, eksperymentowania przy towrzeniu kodu. Po średniku (;) można inicjować więcej niż jedną zmienną. W poniższym przykładzie przypisujemy zmiennej tab wartość 1 oraz zmiennej rzecz obiekt odpowiadający pierwszemu produktowi. <h1>trzy panele z informacjami</h1> <section ng-init="tab = 1; rzecz = sklep.produkty[0]"> <div class="panel" ng-show="tab === 1"> <h4>opis</h4> <p>{{rzecz.opis}}</p> </div> <div class="panel" ng-show="tab === 2"> <h4>specyfikacja</h4> <p>na razie brak...</p> </div> <div class="panel" ng-show="tab === 3"> <h4>przegląd</h4> </div> </section> <p>na razie nie ma...</p>

26 Angular 1.x, pomoc do lab. 26/27 Internacjonalizacja i lokalizacja internationalization (i18n), localization (l10n): proces tworzenia produktu w taki sposób, żeby łatwo było dostosować go do potrzeb języka czy kultury, trzeba dostarczyć tłumaczenie słów, formatów danych,... do lokalnych potrzeb. Angular wspiera i18n/l10n dla dat, liczb i walut. ID lokalizacyjne: id określające region geograficzny, polityczny czy kulturalny, najczęściej składa się z dwóch części: kod języka-kod kraju, przykłady: en-us, en-au, pl-pl,... ale też: en, pl, sk,...

27 Internacjonalizacja II Pliki ze skryptami do lokalizacji: Dwa polskie (niczym się nie różnią): angular-locale pl.js angular-locale pl-pl.js dużo innych... Dwa podejścia: dodanie lokalizacji na stałe do skryptu angular.js: cat angular.js angular-locale_pl-pl.js > angular_pl-pl.js dołączenie skryptu z lokalizacją do pliku html: <html ng-app> <head>... <script src="angular.min.js"></script> <script src="angular-locale_pl-pl.js"></script> </head> </html> Angular 1.x, pomoc do lab. 27/27