WYKŁAD 1 ANGULARJS CZĘŚĆ 1

Transkrypt

1 WYKŁAD 1 ANGULARJS CZĘŚĆ 1

2 DEFINICJA ANGULARJS Framework JavaScript na licencji open-source wykorzystywany do tworzenia aplikacji SPA (single page applications) w oparciu o wzorzec projektowy Model-View-Controler. Opracowany przez zespół Google, oficjalnie został opublikowany w 2012 roku. Dlaczego powstał? Ze względu na coraz szybszy rozwój aplikacji mobilnych i SPA, pojawiło się zapotrzebowanie na uporządkowanie i wprowadzenia struktury MVC do rozwiązań JavaScript. AngularJS świetnie się do tego nadaje.

3 CECHY ANGULARJS Logika przeniesiona z serwera na klienta dane łączone są z szablonem w przeglądarce, a nie na serwerze; Serwer to źródło danych dostarczające HTML, CSS i JS przy pierwszym ładowaniu strony później dane ładowane dynamicznie bez odświeżania; Odświeżanie są tylko wybrane elementy a nie strona (AJAX); Dwustronne wiązanie (two way data-binding) modyfikacje w widoku powodują natychmiastowe zmiany w modelu i odwrotnie; Jasna struktura MVC wspierająca budowę dużych aplikacji. Zestaw wbudowanych, intuicyjnych filtrów do prezentacji danych; Środowisko testowe dla aplikacji oraz jej modułowość ułatwiająca testowanie;

4 CZĘŚCI SKŁADOWE ANGULARJS Moduły Zasięgi i model danych Kontrolery Widoki z szablonami i dyrektywami Wiązanie danych Wyrażenia Usługi Wstrzykiwanie zależności Zakresy odpowiedzialności

5 MODUŁY Moduły reprezentują komponenty w aplikacji zapewniają przestrzeń nazw, która umożliwia odwołanie do dyrektyw, zasięgów i innych komponentów. Każdy widok lub strona html zawiera moduł przypisany za pomocą dyrektywy ng-app. <div ng-app="myapp">...</div> <script> var app = angular.module("myapp", []); </script>

6 ZASIĘGI I MODEL DANYCH W AngularJS funkcjonuje pojęcie zasięgu to reprezentacja danych w JavaScript, które służą do wypełnienia widoku. Dane mogą pochodzić z dowolnego źródła: pliku, bazy danych, usługi ale są reprezentowane jako zwykły obiekt JavaScript, a więc można je dowolnie zmieniać i modyfikować w kodzie aplikacji. KONTROLERY Kontrolery odpowiadają za całą logikę biznesową dołączaną do danych i do zasięgu. Rozszerzają przez to możliwości tego zasięgu oraz przekazują dane do widoków.

7 PRZYKŁAD <script> var app = angular.module("myapp", []); app.controller("myctrl", function($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; }); </script> <div ng-app="myapp" ng-controller="myctrl"> {{ firstname + " " + lastname }} </div>

8 $SCOPE W AngularJS dostęp do danych w zasięgu odbywa się przez obiekt $scope. Jeśli przyjmiemy, że aplikacja Angular składa się z: Widoku, który reprezentuje HTML, Modelu, który reprezentują aktualne dane, Kontrolera, czyli funkcji JS, która zarządza danymi, to $scope jest Modelem. To obiekt JS z właściwościami i metodami, z których korzystają Widok i Kontroler.

9 WIDOKI Z SZABLONAMI I DYREKTYWAMI Dokumenty HTML są oparte na modelu DOM, w którym każdy element HTML jest reprezentowany przez element modelu DOM. Przeglądarka internetowa wczytuje obiekty DOM i dopiero je renderuje na podstawie ich atrybutów i właściwości. AngularJS łaczy szablony z dyrektywami w celu zbudowania widoku HTML, a więc nie modyfikuje istniejącego modelu DOM, ale renderuje go od podstaw, rozszerzając jego możliwości.

10 DYREKTYWY To co wyróżnia Angulara na tle pozostałych frameworków JS to dyrektywy. Dyrektywy rozszerzają możliwości języka HTML, umożliwiając tworzenie niestandardowych elementów, atrybutów i klas. Dyrektywy to kombinacja znaczników szablonów Angulara oraz kodu JavaScript. obsługują funkcje Angulara ng-repeat ; rozszerzają elementy formularzy ng-form ; wiążą zasięg z elementami strony ng-model ; wiążą zdarzenia z kontrolerami ng-click.

11 PRZYKŁAD <div ng-app="" ng-init="names=[ {name:'jani',country:'norway'}, {name:'hege',country:'sweden'}, {name:'kai',country:'denmark'}]"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>

12 WYRAŻENIA Angular daje możliwość wykorzystywania wyrażeń w HTML. Ponieważ są automatycznie łączone z zasięgiem, więc można w nich wykorzystywać dane z zasięgu: <p>my first expression: {{ }}</p> <p>my second expression: {{ expression + 5 }}</p>

13 USŁUGI Obiekty Angulara zapewniające główne funkcje aplikacji internetowej, np. tworzenie żądań AJAX przez usługę $http. WSTRZYKIWANIE ZALEŻNOŚCI Proces, w którym komponent kodu definiuje zależności od innych komponentów kodu. Na przykład korzystanie z usług w modułach odbywa się przez wstrzyknięcie do kontrolera usługi $http.

14 PRZYKŁAD <div ng-app="myapp" ng-controller="customersctrl"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> <script> var app = angular.module('myapp', []); app.controller('customersctrl', function($scope, $http) { $http.get(" {$scope.names = response.data.records;}); }); </script>

15 CYKL ŻYCIA APLIKACJI ANGULAR JS Faza kompilacji Faza inicjowania Faza wiązania danych 1. Inicjacja komponentów Angular JS oraz modułu ng-app; 2. Kompilowanie kodu HTML wczytywane drzewo DOM i dyrektywy, a następnie renderowanie nowego drzewa DOM. 3. Aktualizacja zmian w modelu i widoku.

16 JAK ZACZĄĆ AngularJS framework JavaScript operujący na HTML. Trzeba pobrać bibliotekę angularjs ( W dokumencie html przez zamknięciem </body> trzeba dodać skrypt: <script src= angular.min.js ></script> </body> Lub: Dodajemy bibliotekę z repozytorium: <script src= beta.5/angular.min.js ></script>

17 DYREKTYWA NG-APP Dyrektywa ng-app określa, jaka część drzewa DOM będzie zarządzana przez AngularJS. Jeśli stosujemy AngularJS do całej strony, dyrektywę umieszczamy w <html>. <html ng-app> </html> Umieszczenie ng-app w innym znaczniku ograniczy działanie AngularJS tylko do zawartości tego znacznika, np. <section ng-app> tytlko do zawartości sekcji przydatne przy stosowaniu różnych technologii.

18 TEST DZIAŁANIA: <!DOCTYPE html> <html ng-app> <body> <p>imię : <input type="text" ngmodel="name" placeholder="podaj imię"></p> <h1>hello {{name}}</h1> <script src= " s"></script> </body> </html>

19 DZIĘKUJĘ ZA UWAGĘ MATERIAŁY POMOCNICZE