Podstawy AngularJS

Podstawy AngularJS
Tomek Sułkowski

Front-end
Developer 
Trener IT

Agenda
• Wprowadzenie / kontekst / narzędzia
• Teoria / demo
• Warsztat
• Teoria / demo
• Warsztat
• …
• Q & A

http://myholidays.com/#/jacuzzi/guys
SPA?
http://myholidays.com/#/mask/ftw

Narzędzia
WebStorm (IDE)
SublimeText 3 Atom 1.0 Brackets
… Vim?

Node Packaged
Modules
• system zarządzania zależnościami dla  
„server-side js”
• zależności opisywane w pliku package.json
• npm install - instaluje pakiety, których
jeszcze nie ma w projekcie
• npm update - sprawdza, czy istnieją nowsze
wersje pakietów + instaluje
• npm install nazwa-pakietu —save-dev
- instaluje pakiet, dodaje go do package.json

Bower
npm install -g bower
• zarządzanie zależnościami dla client-side js
• zależności opisywane w bower.json
• bower install - instaluje pakiety, których jeszcze
nie ma w projekcie
• bower update - sprawdza, czy istnieją nowsze
wersje pakietów + instaluje
• bower install nazwa-pakietu --save  
- instaluje pakiet, dodaje go do bower.json
• pakiety instalowane są do katalogu  
/bower_components/nazwa-pakietu/… 
- stamtąd należy je linkować w plikach html

Module
Conﬁg
[ module1, module2, module3, … ]
Routing
View
(template)
Controller Service
Directive
$scope

Moduły, struktura aplikacji
• Moduły wskazują na zależności od zewnętrznych bibliotek
• Moduły nie separują zawieranych komponentów
(namespaces)
• Poszczególne fragmenty aplikacji jako moduły, 
o hierarchii odzwierciedlonej w strukturze katalogów
Form Follows Function
OPINIA

Routing
ngRoute
ui.router
$stateProvider
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: "ListController"
})
demo: http://plnkr.co/edit/u18KQc
.config(function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
})

Widok
Zwyczajny dokument HTML rozszerzony o:
• dyrektywy, np. ng-init
• wyrażenia w klamrach, np. {{ age + 8 }}
1 <div ng-controller="PersonCtrl">
2 <input type="text" ng-model="firstName">
3 <input type="text" ng-model="lastName">
4
5 <p>Witaj {{ firstName }} {{ lastName }}</p>
6
7 <a ng-click="clearName()">wykasuj dane</a>
8 </div>

Controller
• Zwykła JavaScriptowa funkcja
• Powiązanie z widokiem odbywa się przez $scope
 
1 myApp.controller('PersonCtrl', function($scope)
2 {
3 $scope.firstName = 'John';
4 $scope.lastName = 'Smith';
5
6 $scope.clearName = function() {
7 $scope.firstName = $scope.lastName = '';
8 };
9 });

Dyrektywy
<html>
<my-calendar></my-calendar>
<div my-calendar=2014></div>
<div class="my-calendar: 2014"> 
<!— directive: my-calendar 2014 -->

Usługi
• Miejsce na logikę biznesową
• Metody pomocnicze,  
powtarzalny kod
• Współdzielone dane / model
Po co? Jak?
.constant(…
.value(…
.service(…
.factory(…
.provider(…
usługi wbudowane: https://docs.angularjs.org/api/ng/service

Service
1 myApp.service('helloService', function () {
2
3 this.sayHello = function () {
4 return this.greeting + ' world!';
5 };
6
7 this.greeting = 'Hello';
8
9 });

Factory
1 myApp.factory('Person', function() {
2 function Person(firstName, lastName) {
3 this.firstName = firstName;
4 this.lastName = lastName;
5 this.age = 0;
6 }
7
8 Person.prototype.getFullName = function () {
9 return this.firstName + ' ' + this.lastName;
10 }
11
12 return Person;
13 });

Obietnice
http://andyshora.com/promises-angularjs-explained-as-cartoon.html
$q

Dyrektywy
• Enkapsulują logikę związaną z zachowaniem
elementu interfejsu
• Tworzą widgety - małe aplikacje, klocki z których
budujemy większe fragmenty…

Directive Deﬁnition Object
1 myApp.directive('awesome', function () {
2 return {
3 priority: 0,
4 template: '<div>…</div>',
5 replace: true,
6 transclude: true,
7 restrict: 'A',
8 scope: {…},
9 link: function postLink(scope, element, attrs) {
10
11 }
12 };
13 })

Izolowany scope
<my-race start="race.start" days="race.days"
cheer="'Hurrah!'" on-finish="goDance()">
</my-race>
1 .directive('myRace', function () {
2 return {
… ...
4 scope: {
5 dateStart: '=start'
6 days: '=',
7 cheer: '@',
8 finishCallback: '&onFinish'
9 }
10 };
11 });

Filtry
• Umożliwiają przekształcenie danych w trakcie
przejścia ze $scope do widoku bez zmieniania
oryginalnej wartości.
1 {{ user.firstName | uppercase }}
2 Jack -> JACK
3
4 {{ user.createdAt | date:'dd.MM.yyyy, HH:mm' }}
5 Wed Mar 05 2014 14:22:01 GMT+0100 (CET) -> 05.03.2014, 14:22
6 1394025721000 -> 05.03.2014, 14:22
7
8 {{ user.interests | orderBy:'toString()':true | limitTo:2 }}
9 ['movies','sports','gaming','travel'] -> ['travel','sports']

Własne Filtry
Deﬁniowanie własnego ﬁltra sprowadza się do deklaracji
prostej funkcji:
1 myApp.filter('slice', function() {
2 return function(arr, start, end) {
3 return (arr || []).slice(start, end);
4 };
5 });
nazwa filtra
wartość na wejściu kolejne parametry

Formularze
Element <form name="sampleform" novalidate>
to dyrektywa, która dostarcza kilka przydatnych zachowań
dotyczących pracy z formularzami.  
Najważniejszym jest obsługa walidacji.
1 <input type="email"
2 ng-model="{ string }"
3 name="{ string }"
4 required
5 ng-required="{ boolean }"
6 ng-minlength="{ number }"
7 ng-maxlength="{ number }"
8 ng-pattern="{ string }"
9 ng-change="{ string }">
10 </input>

Walidacja
<form name="userform">
<input type="email" name="mail" ng-model="field" required minlength="5"/>
<div ng-messages="userform.mail.$error" ng-messages-multiple>
<p ng-message="required">Pole obowiązkowe</p>
<p ng-message="minlength">Zbyt krótka wartość</p>
<p ng-message="email">Wartość nie jest e-mailem</p>
</div>
</form>
<button type="submit" class="btn btn-primary"
ng-disabled="userForm.$invalid">
Zapisz
</button>
form.ng-dirty { background: #e6f2ff }
.ng-invalid-max-length { border-color: red }

Co dalej?
więcej na temat organizacji kodu i innych dobrych praktyk:
 
https://github.com/toddmotto/angularjs-styleguide
https://github.com/johnpapa/angularjs-styleguide

Co dalej?
Regularne szkolenia w grupach 4-8 osób
Więcej materiału
Więcej case’ów
Więcej elastyczności i czasu
Więcej lunchy :)

Podstawy AngularJS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (11)

Semelhante a Podstawy AngularJS

Semelhante a Podstawy AngularJS (20)

Mais de Sages

Mais de Sages (6)

Podstawy AngularJS