Materiały dla studentów Informatyki WSZiB w Krakowie

Transkrypt

1 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak Wyższa Szkoła Zarządzania i Bankowości w Krakowie Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 1 Przedmiot: Aplikacje internetowe Plan prezentacji Serwer Node.js Framework Express Dr inż. Stanisław Polak Przedmiot: Aplikacje internetowe Serwer Node.js Serwer Node.js Node.js Ogólna charakterystyka Udostępnia JavaScript po stronie serwera Używa V8 JavaScript Engine System do tworzenia serwisów sieciowych z asynchronicznym WE/WY Wykorzystuje paradygmat programowania sterowanego zdarzeniami Nadaje się dobrze do pisania aplikacji, które wymagają komunikacji w czasie rzeczywistym pomiędzy przeglądarką a serwerem Pojedyncza instancja Node.js działa jako pojedynczy wątek Pętla zdarzeń podmiot, który obsługuje / przetwarza zdarzenia zewnętrzne i konwertuje je na wywołania funkcji zwrotnych. Rysunek: Schemat działania pętli zdarzeń w Node.js Przykład Hello World 1 #!/usr / bin / node console. log ( " Hello World " ) ; Uruchamianie skryptu $ node hello.js Hello World Uruchamianie trybu interaktywnego $ node > console.log("hello World") Hello World undefined > + > ^D $ hello.js Uruchamianie skryptu $ chmod 755 hello.js $./hello.js Hello World Dr inż. Stanisław Źródło: Polak 3 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak Przedmiot: Aplikacje internetowe

2 Serwer Node.js Serwer Node.js Wprowadzanie i wyprowadzanie danych 1 process. stdout. write ( 1 ) ; process. stdout. write ( ) ; 3 console. log ( 3 ) 5 / 6 c o n s o l e. l o g = f u n c t i o n (d) { 7 p r o c e s s. s t d o u t. w r i t e ( d + \n ) ; 8 }; 9 / process. stdin. setencoding ( utf8 ) ; 1 process. stdout. write ( Wprowad ź dane - naci śnięcie ^D koń czy ich wprowadzanie \n ) ; 13 process. stdin. on ( readable, function ( ) { 1 var chunk = process. stdin. read ( ) ; 15 if ( chunk!== null ) { 16 process. stdout. write ( Wczytano : + chunk ) ; 17 } 18 }) ; 19 console.log(ósiągnięto koniec skryptu ) ; Uruchamianie $ node skrypt.js 13 Wprowadź dane - naciśnięcie ^D kończy ich wprowadzanie Osiągnięto koniec skryptu abc Wczytano: abc def Wczytano: def skrypt.js Dostęp do zmiennych środowiskowych, obsługa linii komend 1 // Odczyt warto ś c i zmiennej ś rodowiskowej HOME console. log ( "Twój katalog domowy to: "+process. env [ HOME ] ) ; 3 //Wyś w i e t l e n i e warto ś c i argument ów l i n i i komend 5 console. log ( " Argumenty linii komend to:" ) ; 6 process. argv. foreach ( function ( wartosc, indeks, tablica ) { 7 console. log ( \t +indeks + : + wartosc ) ; 8 }) ; Uruchamianie $ node skrypt.js 1 b= Twój katalog domowy to: /home/polak Argumenty linii komend to: 0: node 1: /home/polak/skrypt.js : 1 3: b= skrypt.js Dr inż. Stanisław Polak 5 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 6 Przedmiot: Aplikacje internetowe Serwer Node.js Serwer Node.js Moduł Tworzenie, korzystanie 1 var mymodule = require( mojmodul ) ; // za ł aduje node modules /mojmodul. js // v a r mymodule = require (. / mojmodul ) ; // za ł a d u j e. / mojmodul. j s 3 console. log ( mymodule. zmienna1 ) ; // u n d e f i n e d console. log ( mymodule. zmienna ) ; // 5 console. log ( mymodule. zmienna3 ) ; // u n d e f i n e d 6 console. log ( mymodule. zmienna ) ; // 7 console. log ( mymodule. fun1 ( ) ) ; // fun1 8 console. log ( mymodule. fun ( ) ) ; // TypeError : Object #<Object> has no method fun skrypt.js Obsługa pakietów $ npm install nazwa_pakietu # Moduły ->./node modules/ # Pliki wykonywalne ->./node modules/.bin/ # Manuale -> nie są instalowane 1 console. log ( require. main === module ) ; / Wypisze : true, je ż e l i skrypt uruchomimy bezpo ś r e d n i o ( z l i n i i komend ), t j $ node mojmodul. j s 3 Wypisze : false, je ż e l i go zaimportujemy z poziomu innego skryptu, t j. require ( mojmodul ) 5 / 6 zmienna1 = 1 ; 7 exports. zmienna = ; 8 var zmienna3 = 3 ; 9 var zmienna ; 10 exports. zmienna = ; 11 var exports. zmienna5 = 5 ; // SyntaxError : Unexpected token. 1 exports. fun1 = function ( ) { 13 return "fun1 " ; 1 }; 15 fun = function ( ) { 16 return "fun " ; 17 }; node modules/mojmodul.js $ npm install -g nazwa_pakietu Dr inż. Stanisław # Moduły Polak -> {prefix}/lib/node modules/ 7 Przedmiot: Aplikacje internetowe # Pliki wykonywalne -> {prefix}/bin/ # Manuale -> {prefix}/share/man/ Obsługa plików 1 var fs = require ( "fs" ) ; // Sprawd ź czy p l i k i s t n i e j e 3 try{ fs. accesssync( plik.txt ) ; } catch ( err ){ fs. writefilesync( plik.txt, 1 ) ; } 5 fs. readfile( plik.txt, utf -8, function ( error, data ) { 6 if ( error ) throw error ; 7 console. log ( " Odczytana wartość: "+ data ) ; 8 }) ; 9 10 fs. writefile( plik. txt,, function ( error ) { 11 if ( error ) throw error ; 1 console. log ( Zapisano wartość ) ; 13 }) ; Uruchamianie $ node skrypt1.js Zapisano wartość Odczytana wartość: Wersja nieprawidłowa 1 var fs = require ( "fs" ) ; try{ fs. accesssync ( plik.txt ) } 3 catch ( err ){ fs. writefilesync ( plik.txt, 1 ) ; } 5 fs. readfile ( plik. txt, utf -8, function ( error, data ) { 6 if ( error ) throw error ; 7 console. log ( " Odczytana wartość: "+data ) ; 8 9 fs. writefile ( plik. txt,, function ( error ) { 10 if ( error ) throw error ; 11 console. log ( Zapisano wartość ) ; 1 }) ; 13 }) ; Uruchamianie $ node skrypt.js Odczytana wartość: 1 Zapisano wartość Wersja prawidłowa Dr inż. Stanisław Polak 8 Przedmiot: Aplikacje internetowe

3 Serwer Node.js Serwer Node.js Obsługa bazy danych SQLite 3 1 var sqlite3 = require ( sqlite3 ) ; 3 var db = new sqlite3. Database ( : memory : ) ; //Zwraca obiekt Database 5 db. serialize( function ( ) { 6 db. run( "CREATE TABLE products (info TEXT )" ) ; 7 var stmt = db. prepare( "INSERT INTO products VALUES (?) " ) ; //Zwraca obiekt Statement 8 for ( var i = 0 ; i < ; i++) { 9 stmt. run( " Produkt " + i ) ; 10 } 11 stmt. finalize ( ) ; 1 13 jsondata = { products : [ ] }; 1 db. each( "SELECT rowid AS id, info FROM products ", function ( err, row ) { 15 jsondata. products. push ({ id : row. id, info : row. info }) ; 16 }, function ( ) { 17 console. log ( JSON. stringify ( jsondata ) ) ; //JSON. s t r i n g i f y wbudowana f u n k c j a JS 18 } 19 ) ; 0 }) ; 1 db. close ( ) ; Instalacja i uruchamianie bd.js $ npm install sqlite3 $ node bd.js {"products":[{"id":1,"info":"produkt 0"},{"id":,"info":"Produkt 1"}]} Dr inż. Stanisław Polak 9 Przedmiot: Aplikacje internetowe Tworzenie dodatków (addons) w C++ Przykład Hello World 1 / Poniż szy program jest odpowiednikiem nast ę pującego kodu JS : 3 e x p o r t s. h e l l o = f u n c t i o n ( ) { r e t u r n world ; }; / 5 6 #include <node. h> 7 8 using namespace v8 ; 9 10 void Method ( const FunctionCallbackInfo<Value>& args ) { 11 Isolate isolate = Isolate : : GetCurrent ( ) ; 1 HandleScope scope ( isolate ) ; 13 args. GetReturnValue ( ). Set ( String : : NewFromUtf8 ( isolate, " world " ) ) ; 1 } void init ( Handle<Object> exports ) { 17 NODE_SET_METHOD ( exports, " hello ", Method ) ; 18 } 19 0 NODE_MODULE ( hello, init ) // t u t a j n i e ma ś r e d n i k a hello.cc Instalacja programu node-gyp $ npm install -g node-gyp 1 { " targets " : [ 3 { "target_name " : "hello ", 5 " sources " : [ " hello.cc" ] 6 } 7 ] 8 } binding.gyp 1 var addon = require (./ build / Release / hello ) ; console. log ( addon. hello ( ) ) ; hello.js Kompilacja i uruchomienie $ node-gyp configure $ node-gyp build $ node hello.js world Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 10 Przedmiot: Aplikacje internetowe Obsługa protokołu HTTP Serwer Node.js Obsługa protokołu HTTP Szkielet skryptu 1 var http = require ( " http " ) ; 3 function requestlistener (request, response) { console. log ( "Pojawi ło się żą danie od klienta " ) ; 5 response. writehead (00, {"Content -Type " : "text / plain "}) ; 6 response. write ( " Hello World " ) ; 7 response. end ( ) ; 8 } 9 var serwer = http. createserver ( requestlistener ) ; 10 serwer. listen (8080) ; 11 console. log ( "Uruchomiono serwer " ) ; serwer.js Sprawdzenie działania Z poziomu terminala $ node serwer.js & Uruchomiono serwer $ curl Pojawiło się żądanie od klienta Hello World 1 var http = require ( " http " ) ; 3 http. createserver ( function ( request, response ) { console. log ( "Pojawi ło się żą danie od klienta " ) ; 5 response. writehead ( 00, {"Content -Type " : "text / plain "}) ; 6 response. write ( " Hello World " ) ; 7 response. end ( ) ; 8 }). listen (8080) ; 9 console. log ( "Uruchomiono serwer " ) ; Wersja alternatywna Rysunek: Z poziomu przeglądarki WWW Obsługa protokołu HTTP Serwer Node.js Obsługa parametrów URL 1 var url = require ( " url " ) ;... 3 function requestlistener ( request, response ) { console. log ( "Pojawi ło się żą danie od klienta " ) ; 5 var url_parts = url. parse ( request. url, true ) ; // Pass t r u e as t h e second argument to a l s o p a r s e the query string using the querystring module. Defaults to f a l s e. 6 console. log ( url_parts ) ; 7 8 response. writehead ( 00, {"Content -Type " : "text /plain "}) ; 9 response. write ( \n ) ; 10 response. write ( url_parts. pathname+ \n ) ; 11 response. write ( Login : +url_parts. query [ login ]+ \n ) ; 1 response. write ( Has ło: +url_parts. query [ haslo ]+ \n ) ; 13 response. end ( ) ; 1 } Terminal 1 $ node serwer.js Uruchomiono serwer Pojawiło się żądanie od klienta {... search:?login=jan&haslo=kowalski+%8nowak%9, query: { login: Jan, haslo: Kowalski (Nowak) }, pathname: /abc, path: /abc?login=jan&haslo=kowalski+%8nowak%9, href: /abc?login=jan&haslo=kowalski+%8nowak%9 } serwer.js Terminal $ curl Kowalski+%8Nowak%9 /abc Jan Kowalski (Nowak) Dr inż. Stanisław Polak 11 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 1 Przedmiot: Aplikacje internetowe

4 Obsługa protokołu HTTP Serwer Node.js Obsługa formularzy Kodowanie application/x-www-form-urlencoded 1 var qs = require ( querystring ) ;... 3 function requestlistener ( request, response ) { var url_parts = url. parse ( request. url, true ) ; 5 if ( url_parts. pathname == /form ){ // g e n e r o w a n i e f o r m u l a r z a 6 response. writehead (00, {"Content -Type " : "text /html "}) ; 7 response. write ( <form method ="POST " action ="/ submit "> ) ; 8 response. write ( <input name =" login " value =" Jan "> ) ; 9 response. write ( <input name =" haslo " value =" Kowalski ( Nowak ) ąę"> ) ; 10 response. write ( <input type =" submit "> ) ; 11 response. write ( </form > ) ; 1 response. end ( ) ; 13 } 1 if ( url_parts. pathname == /submit ) { // przetwarzanie zawarto ś ci formularza 15 if ( request. method== GET ) { 16 response. writehead ( 00, {"Content -Type " : "text /plain "}) ; 17 response. write ( url_parts. query [ login ]+ \n ) ; // przegl ądarka wypisze : Jan\n 18 response. write ( url_parts. query [ haslo ]+ \n ) ; // przegl ądarka wypisze : Kowalski (Nowak ) ąę \n 19 response. end ( ) ; 0 } 1 else if ( request. method== POST ) { var body= ; 3 request. on( data, function ( data ) { body +=data ; 5 }) ; 6 request. on( end, function ( ){ 7 var data = qs. parse( body ) ; //body z a w i e r a l o g i n=jan&h a s l o=k o w a l s k i+%8nowak%9+%c%85% C%99 8 response. writehead ( 00, {"Content -Type " : "text /plain "}) ; 9 response. write ( data [ login ]+ \n ) ; // przegl ądarka wypisze : Jan\n 30 response. write ( data [ haslo ]+ \n ) ; // przegl ądarka wypisze : Kowalski (Nowak ) ąę\n 31 response. end ( ) ; 3 }) ; 33 } 3 } 35 } Dr inż. 36 Stanisław... Polak 13 Przedmiot: Aplikacje internetowe Obsługa protokołu HTTP Serwer Node.js Obsługa protokołu CGI 1 #! / b i n / sh echo "Content -Type : text / plain " 3 echo echo " Skrypt CGI wywo ł ano z argumentem $QUERY_STRING " hello.cgi Instalacja i uruchamianie $ npm install cgi $ chmod 755 hello.cgi $ node skrypt.js & $ curl Skrypt CGI wywołano z argumentem $ curl Skrypt CGI wywołano z argumentem abc 1 var cgi = require ( cgi ) ; var http = require ( http ) ; 3 var path = require ( path ) ; 5 var script = path. resolve ( hello.cgi ) ; 6 7 http. createserver ( cgi ( script ) ). listen ( 8080) ; skrypt.js Dr inż. Stanisław Polak 1 Przedmiot: Aplikacje internetowe Obsługa protokołu HTTP Serwer Node.js Framework Express Wolnostojący serwer WWW Express Ogólna charakterystyka Instalacja i uruchamianie $ npm install http-server -g $ http-server -h usage: http-server [path] [options] options: -p Port to use [8080] -a Address to use [ ] -d Show directory listings [true] -i Display autoindex [true] -e --ext Default file extension if none supplied [none] -s --silent Suppress log messages from output -h --help Print this list and exit. -c Set cache time (in seconds). e.g. -c10 for 10 seconds. To disable caching, use -c-1. $ http-server Starting up http-server, serving./ on port: 8080 Hit CTRL-C to stop the server Najpopularniejszy framework do tworzenia aplikacji WWW Inspirowany projektem Ruby Sinatra Moduł node.js instalacja npm install -g express API oparte na JSON Dr inż. Stanisław Polak 15 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 16 Przedmiot: Aplikacje internetowe

5 Aplikacja Hello World 1 Framework Express Użyte narzędzia oraz języki Aplikacja Hello World 1 Framework Express Tworzenie szkieletu aplikacji 1 $ mkdir MySite $ cd MySite 3 $ vi package. json $ npm install #i n s t a l o w a n i e z a l e ż no ś c i Jade System szablonów Treść szablonu jest tłumaczona na HTML CSS 1 { " name " : " MySite ", 3 " version " : " ", " private " : " true ", 5 " dependencies " : { 6 " express " : "*", 7 " jade " : "*", 8 " morgan " : "*" 9 } 10 } package.json Dr inż. Stanisław Polak 17 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 18 Przedmiot: Aplikacje internetowe Aplikacja Hello World 1 Framework Express Główny plik aplikacji 1 var express = require ( express ), logger = require ( morgan ) ; 3 var app = express ( ) ; 5 var router = express. Router ( ) ; 6 app. set ( views, dirname + / views ) ; 7 app. set ( view engine, jade ) ; 8 app. use ( logger ( dev ) ) ; 9 app. use ( express. static ( dirname + / public ) ) ; 10 router. get ( /, function ( req, res ) { 11 res. render ( index, 1 { title : Home } 13 ) 1 }) ; 15 app. use ( /, router ) ; 16 app. listen (3000) ; app.js Dr inż. Stanisław Polak 19 Przedmiot: Aplikacje internetowe Aplikacja Hello World 1 Framework Express Pliki Jade 1 extend layout block content 3 p Witaj Świecie 5 Witaj Świecie 6 p 7 Witaj Świecie 8 block sidebar 9. widget 10 h1 Widget 11 p 1 Tre ś ć ramki views/index.jade 1 doctype html html 3 head title #{title} My Site 5 link ( rel= stylesheet, href= / stylesheets / style.css ) 6 body 7 header 8 h1 My Site 9. container 10. main content 11 block content 1. sidebar 13 block sidebar 1 footer 15 p Running on node with Express, Jade and Stylus views/layout.jade Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 0 Przedmiot: Aplikacje internetowe

6 Aplikacja Hello World 1 Framework Express Plik CSS Aplikacja Hello World 1 Framework Express Uruchamianie aplikacji 1 $ node app GET / ms b 3 GET / stylesheets / style. css ms.6 kb 1 body {... 3 }. widget { } 7... public/stylesheets/style.css Dr inż. Stanisław Polak 1 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak Przedmiot: Aplikacje internetowe Aplikacja Hello World Framework Express Polecenie express Aplikacja Hello World Framework Express Generowanie aplikacji Hello World Użycie polecenia express 1 $ npm install g express generator $ express help 3 Usage : express [ options ] [ dir ] 5 Options : 6 7 h, help output usage information 8 V, version output the version number 9 e, ejs add ejs engine support ( defaults to jade ) 10 hbs add handlebars engine support 11 H, hogan add hogan. js engine support 1 c, css <engine> add stylesheet <engine> support ( less stylus compass ) ( defaults to plain css ) 13 f, force force on non empty directory 1 $ express MySite create : MySite 3 create : MySite / package. json create : MySite / app. js 5 create : MySite / public 6 create : MySite / public / javascripts 7 create : MySite / public / images 8 create : MySite / public / stylesheets 9 create : MySite / public / stylesheets / style. css 10 create : MySite / routes 11 create : MySite / routes / index. js 1 create : MySite / routes / users. js 13 create : MySite / views 1 create : MySite / views / index. jade 15 create : MySite / views / layout. jade 16 create : MySite / views / error. jade 17 create : MySite / bin 18 create : MySite / bin / www 19 0 install dependencies : 1 $ cd MySite && npm install 3 run the app : $ DEBUG=MySite : npm start Dr inż. Stanisław Polak 3 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak Przedmiot: Aplikacje internetowe

7 Aplikacja Hello World Framework Express Plik package.json Aplikacja Hello World Framework Express Główny plik aplikacji app.js 1 { " name " : " MySite ", 3 " version " : " ", " private " : true, 5 " scripts " : { 6 " start " : " node./ bin / www " 7 }, 8 " dependencies " : { 9 "body - parser " : " ~1.13. ", 10 " cookie - parser " : " ~1.3.5 ", 11 " debug " : " ~..0 ", 1 " express " : " ~.13.1 ", 13 " jade " : " ~ ", 1 " morgan " : " ~1.6.1 ", 15 "serve - favicon " : " ~.3.0 " 16 } 17 } var routes = require (./ routes / index ) ; 3 var users = require (./ routes / users ) ; 5 var app = express ( ) ; app. use ( /, routes ) ; 8 app. use ( / users, users ) ; 9... Dr inż. Stanisław Polak 5 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 6 Przedmiot: Aplikacje internetowe Aplikacja Hello World Framework Express Pliki z definicją tras Aplikacja Hello World Framework Express Pozostałe (wygenerowane) pliki 1 var express = require ( express ) ; var router = express. Router ( ) ; 3 / GET home page. / 5 router. get ( /, function ( req, res ) { 6 res. render ( index, { title : Express }) ; 7 }) ; 8 9 module. exports = router ; 1 extends layout 3 block content h1= title 5 p Welcome to #{title} views/index.jade 1 doctype html html 3 head title= title 5 link ( rel= stylesheet, href= / stylesheets / style.css ) 6 body 7 block content views/layout.jade 1 var express = require ( express ) ; var router = express. Router ( ) ; 3 / GET u s e r s l i s t i n g. / 5 router. get ( /, function ( req, res ) { 6 res. send ( respond with a resource ) ; 7 }) ; 8 9 module. exports = router ; routes/index.js routes/user.js 1 body { padding : 50 px ; 3 font : 1 px " Lucida Grande ", Helvetica, Arial, sans serif ; } 5 6 a { 7 color : #00B7FF ; 8 } 1 $ cd MySite && npm install $ npm start public/stylesheets/style.css Instalowanie zależności i uruchamianie aplikacji Dr inż. Stanisław Polak 7 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 8 Przedmiot: Aplikacje internetowe

8 Aplikacja Hello World 3 Framework Express MongoDB Ogólna charakterystyka Nierelacyjna baza danych zorientowana dokumentowo Dobrze skalowana Szybka Nie posiada sztywnych schematów danych Podstawowe pojęcia Kolekcja odpowiednik tabeli w relacyjnej bazie danych Dokument odpowiednik wiersza w relacyjnej bazie danych Rysunek: Przykładowy dokument Dr inż. Stanisław Polak 9 Przedmiot: Aplikacje internetowe Aplikacja Hello World 3 Framework Express Model danych w MongoDB Referencje Osadzane dokumenty Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 30 Przedmiot: Aplikacje internetowe Aplikacja Hello World 3 Framework Express Instalowanie zależności Aplikacja Hello World 3 Framework Express Tworzenie zawartości bazy danych 1 $ vi package. json $ npm install #i n s t a l o w a n i e z a l e ż no ś c i " dependencies " : { 3... " monk " : "*" 5 } 6... package.json 1 $ mongo MongoDB shell version : connecting to : test > use bazatestowa1 5 switched to db bazatestowa1 6 > db. datacollection. insert ({ " title " : " Express & Mongo " }) 7 > db. datacollection. insert ({ " title " : " Express " }) 8 > db. datacollection. find ( ) 9 { " _id " : ObjectId ( "5 f8bb757bade7ec7171 " ), " title " : " Express & Mongo " } 10 { " _id " : ObjectId ( "5 f8bd07bade7ec717 " ), " title " : " Express " } 11 > db. datacollection. find ({ " title " : " Express " }) 1 { " _id " : ObjectId ( "5 f8bd07bade7ec717 " ), " title " : " Express " } Dr inż. Stanisław Polak 31 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 3 Przedmiot: Aplikacje internetowe

9 Aplikacja Hello World 3 Framework Express Modyfikacje var bodyparser = require ( body - parser ) ; 3 //Nowy kod var monk = require ( monk ) ; 5 var db = monk ( localhost :7017/ bazatestowa1 ) ; //Nowy kod 8 app. use ( function ( req, res, next ){ 9 req. db = db ; 10 next ( ) ; 11 }) ; 1 // I s t n i e j ą cy kod 13 app. use ( /, routes ) ; 1 app. use ( / users, users ) ; app.js router. get ( / titles, function ( req, res ) { 3 var db = req. db ; var collection = db. get ( datacollection ) ; 5 collection. find ({},{}, function ( e, docs ){ 6 res. render ( titlelist, { 7 " titlelist " : docs 8 }) ; 9 }) ; 10 }) ; 11 1 module. exports = router ; routes/index.js AngularJS Ogólna charakterystyka Wydajny, darmowy framework do tworzenia dynamicznych aplikacji WWW Korzysta z MVC Zgodność aplikacji AngulsJS z różnymi przeglądarkami Pozwala używać HTML jako język szablonów Rozszerza HTML o dodatkowe atrybuty i znaczniki 1 extends layout 3 block content h1 Tytu ł y 5 ul 6 each element in titlelist 7 li #{element. title} views/titlelist.jade Dr inż. Stanisław Polak 33 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 3 Przedmiot: Aplikacje internetowe Główne cechy Dwukierunkowe wiązanie danych Zasięgi Kontrolery Usługi Filtry Dyrektywy Szablony Routing Model View Whatever (MVW) Głębokie linkowanie Wstrzykiwanie zależności Dr inż. Stanisław Polak 35 Przedmiot: Aplikacje internetowe Zalety i wady AngularJS Zalety Zapewnia możliwość tworzenia pojedynczej strony aplikacji w bardzo zgrabny oraz kontrolowany sposób Zapewnia możliwość wiązania danych HTML, co wzbogaca doznania użytkownika serwisu Kod może być testowany w oparciu o mechanizm testów jednostkowych Wykorzystuje wstrzykiwanie zależności oraz pozwala na korzystanie z separacji zagadnień Zapewnia komponenty wielokrotnego użytku Deweloperzy mogą osiągnąć większą funkcjonalność z krótszego kodu Widoki są czystymi stronami HTML, a kontrolerzy napisane w JavaScript wykonują przetwarzania Wady Dr inż. Stanisław Polak 36 Przedmiot: Aplikacje internetowe Stworzone aplikacje nie są bezpieczne Nie działa gdy użytkownik wyłączy obsługę JS

10 Aplikacja Hello World Przykład użycia wzorca MVC 1 <! doctype html> <html> 3 <head> <meta charset="utf -8"> 5 <script src=" https :// ajax. googleapis. com / ajax / libs / angularjs /1..3/ angular.min.js"></ script> 6 </ head> 7 <body ng-app=" myapp "> 8 <! Widok > 9 <div ng-controller="hellocontroller " > 10 <h1>"{{message.hello}} {{message.world}}" mówi AngularJS</ h1> 11 </ div> 1 <! Kontroler > 13 <script> 1 angular. module ( " myapp ", [ ] ) 15. controller( " HelloController ", function ($scope) { 16 $scope.message = { 17 hello : " Witaj ", 18 world : "Ś wiecie " 19 }; 0 }) ; 1 </ script> </ body> 3 </ html> Witaj Świecie mówi AngularJS Etapy ładowania dokumentu HTML 1. Ewaluacja dokumentu HTML. Tworzonie obiektu globalnego angular 3. Rejestracja funkcji kontrolera. Skanowanie HTML 5. Łączenie widoku z odpowiednią funkcją kontrolera 6. Wykonywanie funkcji kontrolera 7. Renderowanie widoku Najważniejsze dyrektywy Przykład użycia wzorca MVVM <body> 3 <div ng-app=""> <p>wprowad ź swoje imi ę : <input type=" text " ng-model=" imie "></p> 5 <p>witaj <span ng-bind=" imie "></ span>!</p> 6 </ div> 7 </ body> 8... Wprowadź swoje imię: Stan Witaj Stan! Dr inż. Stanisław Polak 37 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 38 Przedmiot: Aplikacje internetowe Wyświetlanie danych złożonych <div ng app="" ng-init=" miasta =[{ kierunkowy :1, nazwa : Kraków },{ kierunkowy :, nazwa : Warszawa }] "> 3 <h1>lista numer ów kierunkowych</h1> <ul> 5 <li ng-repeat=" miasto in miasta "> 6 {{"Nr kierunkowy : "+miasto. kierunkowy+", miasto : "+ miasto. nazwa }} 7 </li> 8 </ul> 9 </ div> Lista numerów kierunkowych Nr kierunkowy: 1, miasto: Kraków Nr kierunkowy:, miasto: Warszawa Dr inż. Stanisław Polak 39 Przedmiot: Aplikacje internetowe Wyrażenia <div ng app="" ng i n i t=" ilosc=1; cena =30; student={ id :1, imie : Jan, nazwisko : Kowalski }; oceny =[3.5,.0,.5] "> 3 <! Korzystanie z napis ów > 5 Informacje nt. studenta {{student. imie + " " + student. nazwisko}} 6 <ul> 7 <! K o r z y s t a n i e z o b i e k t u > 8 <li>twój id : {{student. id}} 9 <! K o r z y s t a n i e z l i c z b > 10 <li>wydatki na książki : {{cena ilosc}} z ł 11 <! K o r z y s t a n i e z t a b l i c y > 1 <li>ocena z matematyki : {{oceny [ ] } } 13 </ul> 1 </ div> Informacje nt. studenta Jan Kowalski Twój id: 1 Wydatki na książki : 30 zł Ocena z matematyki:.5 Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 0 Przedmiot: Aplikacje internetowe

11 Kontrolery Moduły <div ng app=" myapp " ng-controller=" studentcontroller "> 3 Podaj imi ę : <input type=" text " ng model=" student. imie "><br><br> Podaj nazwisko : <input type=" text " ng model=" student. nazwisko "><br> 5 <br> 6 Wprowadzasz : {{student. pelnanazwa ( )}} 7 </ div> 8 <script> 9 angular. module ( " myapp ", [ ] ) 10. controller ( " studentcontroller ", function ($scope) { 11 $scope.student = { 1 imie : " Jan ", 13 nazwisko : " Kowalski ", 1 pelnanazwa : function ( ) { 15 var obiektstudent ; 16 obiektstudent = $scope. student ; 17 return obiektstudent. imie + " " + obiektstudent. nazwisko ; 18 } 19 }; 0 }) ; 1 </ script>... Podaj imię: Jan Podaj nazwisko: Kowalski Wprowadzasz: Jan Kowalski 1 var myapp = angular. module ( " myapp ", [ ] ) ; myapp.js Korzystanie z modułów 1 myapp. controller ( " studentcontroller ", function ( $scope ) { $scope. student = { 3 imie : " Jan ", nazwisko : " Kowalski ", 5 pelnanazwa : function ( ) { 6 var studentobject ; 7 studentobject = $scope. student ; 8 return studentobject. imie + " " + studentobject. nazwisko ; 9 } 10 }; 11 }) ; studentcontroller.js <script src="https ://ajax.googleapis.com /ajax /libs /angularjs /1..3/ angular.min.js"></ script> 3 <script src=" myapp.js"></ script> <script src=" studentcontroller.js"></ script> <div ng app=" myapp " ng c o n t r o l l e r=" studentcontroller "> 7 Podaj imi ę : <input type=" text " ng model=" student. imie "><br><br> 8 Podaj nazwisko : <input type=" text " ng model=" student. nazwisko "><br> 9 <br> 10 Wprowadzasz : {{student. pelnanazwa ( )}} 11 </ div> 1... index.html Dr inż. Stanisław Polak 1 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak Przedmiot: Aplikacje internetowe Filtry DOM <body ng app=""> 3 <div ng i n i t=" studenci = [{ imie : Jan, nazwisko : Kowalski }, { imie : Małgorzata, nazwisko : Nowak }, 5 { imie : Anna, nazwisko : Nowak }] "></ div> 6 <label>szukaj : <input ng model=" szukanytekst "></ label> 7 <ul> 8 <! szukanytekst j e s t,, zmienn ą p r z e c h o w u j ą c ą t r e ś ć wprowadzon ą w powy ż szym p o l u <input> > 9 <li ng r e p e a t=" student in studenci filter: szukanytekst ">{{student. nazwisko}} {{student. imie}}</li> 10 </ul> 11 </ body> 1... Szukaj: Kowalski Jan Nowak Małgorzata Nowak Anna index.html Szukaj: Now Nowak Małgorzata Nowak Anna <div ng app=" myapp " ng c o n t r o l l e r=" studentcontroller "> 3 Podaj imi ę : <input type="text " ng model=" student.imie " ng-disabled=" disabletextfield "><br> 5 Podaj nazwisko : 6 <input type="text " ng model=" student. nazwisko " ng-disabled=" disabletextfield "><br > 7 Wprowadzasz : {{student. pelnanazwa ( ) }} 8 <p> 9 <input type=" checkbox " ng model="disabletextfield">dezaktywuj pola tekstowe 10 </p> 11 </ div> 1... index.html Dr inż. Stanisław Polak 3 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak Przedmiot: Aplikacje internetowe

12 Walidacja i wypełnianie formularza <div ng app=" myapp " ng c o n t r o l l e r=" studentcontroller "> 3 <form name=" formularz " novalidate> Podaj imi ę : <input name=" imie " type=" text " ng model=" student. imie " required> 5 <span style=" color : red " ng-show=" formularz. imie. $dirty && formularz. imie. $invalid "> 6 <span ng-show=" formularz. imie. $error. required ">Nie poda ł eś imienia</ span> 7 </ span> 8 <br> 9 Podaj nazwisko : <input name=" nazwisko " type=" text " ng model=" student. nazwisko " required> 10 <span style=" color : red " ng-show=" formularz. nazwisko. $dirty && formularz. nazwisko. $invalid "> 11 <span ng-show=" formularz. nazwisko. $error. required ">Nie poda ł eś nazwiska</ span> 1 </ span><br> 13 <button ng c l ic k=" reset ()">Kasuj</ button> 1 <button ng disabled=" formularz. imie. $dirty && formularz. imie. $invalid formularz. nazwisko. $dirty && formularz. nazwisko. $invalid " 15 ng-click=" submit ()">Wy ś lij</ button> 16 </ form> 17 </ div> index.html Wstawki <div ng app=" myapp " ng c o n t r o l l e r=" studentcontroller "> 3 <div ng-include=" imie.html "></ div> <div ng-include=" nazwisko.html "></ div> 5 </ div> 6... index.html 1 Podaj imi ę : <input name=" imie " type=" text " ng model=" student. imie "> imie.html 1 Podaj nazwisko : <input name=" nazwisko " type="text " ng model=" student. nazwisko "> 1 myapp. controller ( " studentcontroller ", function ( $scope ) { $scope. student = { 3 imie :, nazwisko : 5 }; 6 $scope. reset = function ( ) { 7 $scope. student. imie="jan " ; 8 $scope. student. nazwisko="kowalski " ; 9 }; 10 $scope. reset ( ) ; 11 }) ; studentcontroller.js Podaj imię: Podaj nazwisko: nazwisko.html Dr inż. Stanisław Polak 5 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 6 Przedmiot: Aplikacje internetowe Użycia technologii AJAX Przełączalne widoki <div ng app=" myapp " ng c o n t r o l l e r=" studentcontroller "> 3 <ol> <li ng r e p e a t=" student in students ">{{ student. nazwisko}} {{student. imie}}</ li> 5 </ol> 6 </ div> 7... index.html 1 [ { 3 " imie " : " Jan ", " nazwisko " : " Kowalski " 5 }, 6 { 7 " imie " : " Anna ", 8 " nazwisko " : " Nowak " 9 } 10 ] students.json 1 myapp. controller ( " studentcontroller ", function ( $scope, $http ) { $http. get ( "students.json " ). success ( function ( response ) { 3 $scope. students = response ; }) ; 5 }) ; 1. Kowalski Jan. Nowak Anna studentcontroller.js 1 <h>dodaj studenta</h> {{message}} addstudent.html 1 <h>wy ś wietl student ów</h> {{message}} viewstudents.html <script s r c=" https :// ajax. googleapis. com / ajax / libs /angularjs /1..3/ angular -route.min.js"></ script> 3... <div ng app=" myapp "> 5 <p><a href=" #addstudent ">Dodaj Studenta</a></p> 6 <p><a href=" #viewstudents ">Wy ś wietl student ów</a ></p> 7 <div ng-view></ div> 8 </ div> 9 <script> 10 var myapp = angular. module ( " myapp ", [ ngroute ] ) ; 11 1 myapp. config ( [ $routeprovider, 13 function ( $routeprovider ) { 1 $routeprovider. 15 when ( /addstudent, { 16 templateurl : addstudent. html, 17 controller : AddStudentController 18 }). 19 when ( /viewstudents, { 0 templateurl : viewstudents. html, 1 controller : ViewStudentsController }). 3 otherwise ({ redirectto : / addstudent 5 }) ; 6 }]) ; 7 8 myapp. controller ( AddStudentController, function ( $scope ) { 9 $scope. message = "Ta strona bę dzie uż ywana do wyś wietlenia formularza dodawania studenta " ; 30 }) ; 31 3 myapp. controller ( ViewStudentsController, function ( $scope ) { 33 $scope. message = "Ta strona bę dzie uż ywana do wyś wietlania wszystkich student ów" ; 3 }) ; 35 </ script> index.html Dr inż. Stanisław Polak 7 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 8 Przedmiot: Aplikacje internetowe

13 Przełączalne widoki Szablon widoku inline 17 <script> 18 var myapp = angular. module ( " myapp ", [ ngroute ] ) ; 19 0 myapp. config ( [ $routeprovider, 1 function ( $routeprovider ) { $routeprovider. 3 when ( / addstudent, { <script src=" https :// ajax. googleapis. com / ajax / templateurl : addstudent. html, libs /angularjs /1..3/ angular -route.min.js 5 controller : AddStudentController "></ script> 6 }) when ( / viewstudents, { <div ng app=" myapp "> 8 templateurl : viewstudents. html, 5 <p><a href="# addstudent ">Dodaj Studenta</a></p 9 controller : ViewStudentsController > 30 }). 6 <p><a href="# viewstudents ">Wy ś wietl student ów< 31 otherwise ({ /a></p> 3 redirectto : / addstudent 7 <div ng view></ div> 33 }) ; 8 <script type=" text /ng-template" i d=" addstudent. 3 }]) ; html "> 35 9 <h>dodaj studenta</h> 36 myapp. controller ( AddStudentController, 10 {{message}} function ( $scope ) { 11 </ script> 37 $scope. message = "Ta strona bę dzie uż ywana do 1 <script type=" text /ng-template" i d=" viewstudents wyś wietlenia formularza dodawania. html "> studenta " ; 13 <h>wy ś wietl student ów</h> 38 }) ; 1 {{message}} </ script> 0 myapp. controller ( ViewStudentsController, 16 </ div> function ( $scope ) { 1 $scope. message = "Ta strona bę dzie uż ywana do wyś wietlania wszystkich student ów" ; }) ; 3 </ script> index.html Dr inż. Stanisław Polak 9 Przedmiot: Aplikacje internetowe Zasięgi <div ng app=" mainapp " ng controller=" shapecontroller "> 3 <! Widok > <p>{{message}} <br/> {{type}} </p> 5 <div ng controller=" circlecontroller "> 6 <p>{{message}} <br/> {{type}} </p> 7 </div> 8 <div ng controller=" squarecontroller "> 9 <p>{{message}} <br/> {{type}} </p> 10 </div> 11 </div> 1 <script> 13 var mainapp = angular. module ( " mainapp ", [ ] ) ; 1 mainapp. controller ( " shapecontroller ", function ($scope) { 15 $scope.message = "W kontrolerze kszta łtu" ; 16 $scope.type = "Kszta łt" ; 17 }) ; mainapp. controller ( " circlecontroller ", function ( $scope ) { 0 $scope.message = "W kontrolerze okr ęgu" ; 1 }) ; 3 mainapp. controller ( " squarecontroller ", function ( $scope ) { $scope.message = "W kontrolerze kwadratu " ; 5 $scope.type = "Kwadrat " ; 6 }) ; 7 </script> 8... W kontrolerze kształtu Kształt W kontrolerze okręgu Kształt W kontrolerze kwadratu Kwadrat Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 50 Przedmiot: Aplikacje internetowe Tworzenie własnych usług Kontrolery są tworzone w ramach tego jak są potrzebne i usuwane, gdy przestają być używane Usługa to zwykły obiekt, który ma za zadanie wykonać jakąś pracę Usługi są tworzone jednorazowo (jako singletony) i mogą być wstrzykiwane jako zależność do wielu kontrolerów Nazwy usług wbudowanych rozpoczynają się od znaku $ nazwy naszych własnych serwisów nie powinny rozpoczynać się od znaku $ Dlaczego warto używać własnych usług? Jesteśmy w stanie podzielić kod na mniejsze logiczne fragmenty Taki kod może być użyty wielokrotnie w naszej aplikacji Zasada pojedynczej odpowiedzialności nigdy nie powinno być więcej niż jednego powodu do modyfikacji klasy Wstrzykiwanie zależności usługi można wstrzykiwać do naszych kontrolerów lub innych usług Łatwiejsze testowanie mniejszy kod łatwiej się testuje Typy usług: Wartość Fabryka Serwis Dostawca Stała Dr inż. Stanisław Polak 51 Przedmiot: Aplikacje internetowe Tworzenie usługi typu Wartość 1 // Definiowanie warto ś c i var mymodule = angular. module ( " mymodule ", [ ] ) ; 3 mymodule. value( " numbervalue ", 999) ; mymodule. value( " stringvalue ", "abc " ) ; 5 mymodule. value( " objectvalue ", { val1 : 13, val : "abc "} ) ; 6 7 // W s t r z y k i w a n i e warto ś c i do k o n t r o l e r a 8 mymodule. controller ( " MyController ", function ( $scope, numbervalue ) { 9 console. log ( numbervalue ) ; // Wypisze : }) ; Dr inż. Stanisław Polak 5 Przedmiot: Aplikacje internetowe

14 Tworzenie usługi typu Fabryka Tworzenie usługi typu Serwis 1 var mymodule = angular. module ( " mymodule ", [ ] ) ; 3 // Definiowanie warto ś c i mymodule. value ( " numbervalue ", 999) ; 5 6 // W s t r z y k i w a n i e warto ś c i do f a b r y k i 7 mymodule. factory( " myfactory ", function ( numbervalue ) { 8 return "a value : " + numbervalue ; 9 }) ; // W s t r z y k i w a n i e f a b r y k i do k o n t r o l e r a 1 mymodule. controller ( " MyController ", function ( $scope, myfactory ) { 13 console. log ( myfactory ) ; // Wypisze : a v a l u e }) ; 1 var mymodule = angular. module ( " mymodule ", [ ] ) ; 3 mymodule. value ( " myvalue ", " 135 " ) ; 5 // Wstrzykiwanie warto ś c i do serwisu 6 function MyService ( myvalue ) { 7 this. doit = function ( ) { 8 console. log ( " done : " + myvalue ) ; 9 } 10 } 11 1 mymodule. service( " myservice ", MyService ) ; 13 //Wewnę t r z n i e j e s t wykonywane : v a r t h e S e r v i c e = new MyService ( ) ; 1 15 // W s t r z y k i w a n i e s e r w i s u do k o n t r o l e r a 16 mymodule. controller ( " MyController ", function ( $scope, MyService ) { 17 myservice. doit ( ) ; // Wypisze : done : }) ; Dr inż. Stanisław Polak 53 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 5 Przedmiot: Aplikacje internetowe Tworzenie usługi typu Dostawca Tworzenie usługi typu Stała 1 var mymodule = angular. module ( " mymodule ", [ ] ) ; 3 mymodule. provider( " mysecondservice ", function ( ) { var provider = {}; 5 6 // D e f i n i o w a n i e dostawcy 7 provider. $get = function ( ) { 8 var service = {}; 9 10 service. doservice = function ( ) { 11 console. log ( " mysecondservice : Service Done!" ) ; 1 } 13 return service ; 1 } 15 return provider ; 16 }) ; // W s t r z y k i w a n i e dostawcy do k o n t r o l e r a 19 mymodule. controller ( " MyController ", function ( $scope, mysecondservice) { 0 mysecondservice. doservice ( ) ; // Wypisze : mysecondservice : Se r vi c e Done! 1 }) ; 1 var mymodule = angular. module ( " mymodule ", [ ] ) ; 3 mymodule. provider ( " mysecondservice ", function ( ) { var provider = {}; 5 var config = { configparam : " default " }; 6 7 provider. doconfig = function ( configparam ) { 8 config. configparam = configparam ; 9 } provider. $get = function ( ) { 1 var service = {}; 13 1 service. doservice = function ( ) { 15 console. log ( " mysecondservice : " + config. configparam ) ; 16 } return service ; 19 } 0 1 return provider ; }) ; 3 mymodule. constant( "configvalue ", "constant config value " ) ; 5 mymodule. config( function ( mysecondserviceprovider, configvalue ) { 6 mysecondserviceprovider. doconfig ( configvalue ) ; 7 }) ; 8 9 mymodule. controller ( " MyController ", function ( $scope, mysecondservice ) { 30 mysecondservice. doservice ( ) ; // Wypisze : mysecondservice : c o n s t a n t c o n f i g v a l u e 31 }) ; Dr inż. Stanisław Polak 55 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 56 Przedmiot: Aplikacje internetowe

15 Definiowanie własnej usługi Przykład Minimalizacja kodu JS a wstrzykiwanie zależności Wersja oryginalna 1 myapp. controller ( " studentcontroller ", function ( $scope, $http ) { $http. get ( "students.json " ). success ( function ( response ) { 3 $scope. students = response ; }) ; 5 }) ; Wersja zmodyfikowana studentcontroller.js 1 myapp. factory ( " studentsfactory ", function ( $http ) { return $http. get ( "students.json " ) ; 3 }) ; 5 myapp. controller ( " studentcontroller ", function ( $scope, studentsfactory ) { 6 $scope. students = studentsfactory. success ( function ( response ) { 7 $scope. students = response ; 8 }) ; 9 }) ; studentcontroller.js Wersja niezalecana 1 myapp. controller ( " studentcontroller ", function ( $scope, $http ) { $http. get ( " students.json " ). success ( function ( response ) { 3 $scope. students = response ; }) ; 5 }) ; 1 myapp. controller ( " studentcontroller ", function ( t, n ){n. get ( " students. json " ). success ( function ( n ){t. students= n }) }) ; Wersja zminimalizowana Wersja zalecana 1 myapp. controller ( " studentcontroller ", [ 3 $scope, $http, 5 function( $scope, $http ) { 6 $http. get ( " students.json " ). success ( function ( response ) { 7 $scope. students = response ; 8 }) ; 9 }]) ; 1 myapp. controller ( " studentcontroller ", [ " $scope ", " $http ", function ( t, n ){n. get ( " students. json " ). success ( function ( n ){t. students=n }) } ] ) ; Wersja zminimalizowana Dr inż. Stanisław Polak 57 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 58 Przedmiot: Aplikacje internetowe Definiowanie niestandardowych dyrektyw <div ng app=" myapp " ng c o n t r o l l e r=" StudentController "> 3 <s t u d e n t i n f o s t u d e n t=" kowalski "></ s t u d e n t i n f o> <s t u d e n t i n f o s t u d e n t=" nowak "></ s t u d e n t i n f o> 5 </ div> 6 7 <script> 8 myapp = angular. module ( " myapp ", [ ] ) ; 9 10 myapp. directive ( studentinfo, function ( ) { 11 var directive = {}; 1 13 directive. restrict = E ; 1 15 directive. template = "Student : <b >{{ student.imie }}</b> <b >{{ student.nazwisko }}</b>" ; directive.scope = { 18 student : "= student " 19 } 0 1 return directive ; }) ; 3 myapp. controller ( " StudentController ", function ( $scope, $http ) { 5 $scope. kowalski = {}; 6 $scope. kowalski. imie = "Jan " ; 7 $scope. kowalski. nazwisko = "Kowalski " ; 8 9 $scope. nowak = {}; 30 $scope. nowak. imie = " Anna " ; 31 $scope. nowak. nazwisko = "Nowak " ; 3 }) ; 33 </ script> 3... Dr inż. Stanisław Polak 59 Przedmiot: Aplikacje internetowe Umiędzynarodowienie <script src=" pl-pl.js"></ script> 3... <div ng app=" myapp " ng c o n t r o l l e r=" StudentController "> 5 {{fees currency }} <br/><br/> 6 {{admissiondate date }} <br/><br/> 7 {{rollno number }} 8 </ div> 9 10 <script> 11 var myapp = angular. module ( " myapp ", [ ] ) ; 1 myapp. controller ( StudentController, function ( $scope ) { 13 $scope. fees = ; 1 $scope. admissiondate = new Date ( ) ; 15 $scope. rollno = ; 16 }) ; 17 </ script> 100,00 zł 1 lut ,89 Materiały dla studentów Informatyki WSZiB w Krakowie Dr inż. Stanisław Polak 60 Przedmiot: Aplikacje internetowe

16 Źródła Źródła Źródła I Źródła II Acodemy. Serwisy angularjs. MongoDB Inc. The MongoDB Manual. Jakob Jenkov. AngularJS Tutorial. Joyent. Node.js Manual & Documentation. Maciej Rzepiński. Angularjs factory vs service vs provider. angularjs-8-factory-vs-service-vs-provider.html. Tutorialspoint. AngularJS Tutorial. Dr inż. Stanisław Polak 61 Przedmiot: Aplikacje internetowe Dr inż. Stanisław Polak 6 Przedmiot: Aplikacje internetowe