scope

WYKŁAD 1
ANGULARJS
CZĘŚĆ 1
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.
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;
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
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>
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.
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>
$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.
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.
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”.
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>
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: {{ 5 + 5 }}</p>
<p>My second expression: {{ expression + 5 }}</p>
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.
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("http://www.w3schools.com/angular/customers.php")
.then(function(response) {$scope.names =
response.data.records;});
});
</script>
CYKL ŻYCIA APLIKACJI ANGULAR JS
Faza
inicjowania
Faza
kompilacji
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.
JAK ZACZĄĆ
AngularJS – framework JavaScript operujący na HTML.
 Trzeba pobrać bibliotekę angularJS (http://angularjs.org);
 W dokumencie html przez zamknięciem </body> trzeba dodać
skrypt:
<script src=”angular.min.js”></script>
</body>
Lub:
 Dodajemy bibliotekę z repozytorium:
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0beta.5/angular.min.js”></script>
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.
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=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.j
s"></script>
</body>
</html>
DZIĘKUJĘ ZA UWAGĘ
MATERIAŁY POMOCNICZE
https://angularjs.org/
http://www.w3schools.com/angular/default.asp