Podstawy AngularJS
Tomek Sułkowski
Front-end
Developer

Trener IT
Agenda
• Wprowadzenie / kontekst / narzędzia
• Teoria / demo
• Warsztat
• Teoria / demo
• Warsztat
• …
• Q & A
Intro
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.jso...
Bower
npm install -g bower
• zarządzanie zależnościami dla client-side js
• zależności opisywane w bower.json
• bower inst...
AngularJS
Module
Config
[ 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 ko...
Routing
ngRoute
ui.router
$stateProvider
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
c...
warsztat
Widok
Zwyczajny dokument HTML rozszerzony o:
• dyrektywy, np. ng-init
• wyrażenia w klamrach, np. {{ age + 8 }}
1 <div ng-...
Controller
• Zwykła JavaScriptowa funkcja
• Powiązanie z widokiem odbywa się przez $scope


1 myApp.controller('PersonCtrl...
Dyrektywy
<html>
<my-calendar></my-calendar>
<div my-calendar=2014></div>
<div class="my-calendar: 2014">

<!— directive: ...
demo
Usługi
• Miejsce na logikę biznesową
• Metody pomocnicze, 

powtarzalny kod
• Współdzielone dane / model
Po co? Jak?
.cons...
Service
1 myApp.service('helloService', function () {
2
3 this.sayHello = function () {
4 return this.greeting + ' world!'...
Factory
1 myApp.factory('Person', function() {
2 function Person(firstName, lastName) {
3 this.firstName = firstName;
4 th...
Obietnice
http://andyshora.com/promises-angularjs-explained-as-cartoon.html
$q
warsztat
Dyrektywy
• Enkapsulują logikę związaną z zachowaniem
elementu interfejsu
• Tworzą widgety - małe aplikacje, klocki z któr...
Directive Definition Object
1 myApp.directive('awesome', function () {
2 return {
3 priority: 0,
4 template: '<div>…</div>'...
Izolowany scope
<my-race start="race.start" days="race.days"
cheer="'Hurrah!'" on-finish="goDance()">
</my-race>
1 .direct...
warsztat
Filtry
• Umożliwiają przekształcenie danych w trakcie
przejścia ze $scope do widoku bez zmieniania
oryginalnej wartości.
1...
Własne Filtry
Definiowanie własnego filtra sprowadza się do deklaracji
prostej funkcji:
1 myApp.filter('slice', function() {...
warsztat
Formularze
Element <form name="sampleform" novalidate>
to dyrektywa, która dostarcza kilka przydatnych zachowań
dotyczącyc...
Walidacja
<form name="userform">
<input type="email" name="mail" ng-model="field" required minlength="5"/>
<div ng-message...
warsztat
Co dalej?
więcej na temat organizacji kodu i innych dobrych praktyk:


https://github.com/toddmotto/angularjs-styleguide
h...
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 lunch...
A konkretnie?
Oraz
Pytania?
Dziękuję
Podstawy AngularJS
Tomek Sułkowski
Upcoming SlideShare
Loading in …5
×

Podstawy AngularJS

1,062 views

Published on

Szkolenie "Podstawy AngularJS"

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,062
On SlideShare
0
From Embeds
0
Number of Embeds
100
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Podstawy AngularJS

  1. 1. Podstawy AngularJS Tomek Sułkowski
  2. 2. Front-end Developer
 Trener IT
  3. 3. Agenda • Wprowadzenie / kontekst / narzędzia • Teoria / demo • Warsztat • Teoria / demo • Warsztat • … • Q & A
  4. 4. Intro
  5. 5. http://myholidays.com/#/jacuzzi/guys SPA? http://myholidays.com/#/mask/ftw
  6. 6. Narzędzia WebStorm (IDE) SublimeText 3 Atom 1.0 Brackets … Vim?
  7. 7. 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
  8. 8. 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
  9. 9. AngularJS
  10. 10. Module Config [ module1, module2, module3, … ] Routing View (template) Controller Service Directive $scope
  11. 11. 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
  12. 12. 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' }); })
  13. 13. warsztat
  14. 14. 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>
  15. 15. 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 });
  16. 16. Dyrektywy <html> <my-calendar></my-calendar> <div my-calendar=2014></div> <div class="my-calendar: 2014">
 <!— directive: my-calendar 2014 -->
  17. 17. demo
  18. 18. 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
  19. 19. Service 1 myApp.service('helloService', function () { 2 3 this.sayHello = function () { 4 return this.greeting + ' world!'; 5 }; 6 7 this.greeting = 'Hello'; 8 9 });
  20. 20. 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 });
  21. 21. Obietnice http://andyshora.com/promises-angularjs-explained-as-cartoon.html $q
  22. 22. warsztat
  23. 23. Dyrektywy • Enkapsulują logikę związaną z zachowaniem elementu interfejsu • Tworzą widgety - małe aplikacje, klocki z których budujemy większe fragmenty…
  24. 24. Directive Definition 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 })
  25. 25. 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 });
  26. 26. warsztat
  27. 27. 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']
  28. 28. Własne Filtry Definiowanie własnego filtra 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
  29. 29. warsztat
  30. 30. 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>
  31. 31. 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 }
  32. 32. warsztat
  33. 33. Co dalej? więcej na temat organizacji kodu i innych dobrych praktyk: 
 https://github.com/toddmotto/angularjs-styleguide https://github.com/johnpapa/angularjs-styleguide
  34. 34. 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 :)
  35. 35. A konkretnie?
  36. 36. Oraz
  37. 37. Pytania?
  38. 38. Dziękuję
  39. 39. Podstawy AngularJS Tomek Sułkowski

×