際際滷

際際滷Share a Scribd company logo

Podstawy AngularJS

Sages
Sages

Szkolenie "Podstawy AngularJS"

1 of 39
Downloaded 23 times
Podstawy AngularJS Tomek Sukowski
Front-end Developer Trener IT
Agenda Wprowadzenie / kontekst / narzdzia Teoria / demo Warsztat Teoria / demo Warsztat Q & A
Intro
http://myholidays.com/#/jacuzzi/guys SPA? http://myholidays.com/#/mask/ftw
Narzdzia WebStorm (IDE) SublimeText 3 Atom 1.0 Brackets Vim?
Node Packaged Modules system zarzdzania zale甜nociami dla server-side js zale甜noci opisywane wpliku 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 zarzdzanie zale甜nociami dlaclient-side js zale甜noci 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/ - stamtd nale甜y je linkowa w plikach html
AngularJS
Module Con鍖g [ module1, module2, module3, ] Routing View (template) Controller Service Directive $scope
Moduy, struktura aplikacji Moduy wskazuj na zale甜noci od zewntrznych bibliotek Moduy nie separuj zawieranych komponent坦w (namespaces) Poszczeg坦lne fragmenty aplikacji jako moduy, 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' }); })
warsztat
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 Zwyka JavaScriptowa funkcja Powizanie 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 -->
demo
Usugi Miejsce na logik biznesow Metody pomocnicze, powtarzalny kod Wsp坦dzielone dane / model Po co? Jak? .constant( .value( .service( .factory( .provider( usugi 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
warsztat
Dyrektywy Enkapsuluj logik zwizan z zachowaniem elementu interfejsu Tworz widgety - mae aplikacje, klocki z kt坦rych budujemy wiksze 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 });
warsztat
Filtry Umo甜liwiaj przeksztacenie danych w trakcie przejcia ze$scope do widoku bez zmieniania oryginalnej wartoci. 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']
Wasne Filtry De鍖niowanie wasnego 鍖ltra sprowadza si dodeklaracji 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 wejciu kolejne parametry
warsztat
Formularze Element <form name="sampleform" novalidate> todyrektywa, kt坦ra dostarcza kilka przydatnych zachowa dotyczcych pracy zformularzami. Najwa甜niejszym jest obsuga 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 obowizkowe</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 }
warsztat
Co dalej? wicej 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 Wicej materiau Wicej case坦w Wicej elastycznoci i czasu Wicej lunchy :)
A konkretnie?
Oraz
Pytania?
禽噛庄一顎逮
Podstawy AngularJS Tomek Sukowski

More Related Content

Podstawy AngularJS

  • 3. Agenda Wprowadzenie / kontekst / narzdzia Teoria / demo Warsztat Teoria / demo Warsztat Q & A
  • 6. Narzdzia WebStorm (IDE) SublimeText 3 Atom 1.0 Brackets Vim?
  • 7. Node Packaged Modules system zarzdzania zale甜nociami dla server-side js zale甜noci opisywane wpliku 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. Bower npm install -g bower zarzdzanie zale甜nociami dlaclient-side js zale甜noci 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/ - stamtd nale甜y je linkowa w plikach html
  • 10. Module Con鍖g [ module1, module2, module3, ] Routing View (template) Controller Service Directive $scope
  • 11. Moduy, struktura aplikacji Moduy wskazuj na zale甜noci od zewntrznych bibliotek Moduy nie separuj zawieranych komponent坦w (namespaces) Poszczeg坦lne fragmenty aplikacji jako moduy, o hierarchii odzwierciedlonej w strukturze katalog坦w Form Follows Function OPINIA
  • 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' }); })
  • 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. Controller Zwyka JavaScriptowa funkcja Powizanie 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 });
  • 17. demo
  • 18. Usugi Miejsce na logik biznesow Metody pomocnicze, powtarzalny kod Wsp坦dzielone dane / model Po co? Jak? .constant( .value( .service( .factory( .provider( usugi wbudowane: https://docs.angularjs.org/api/ng/service
  • 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. 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 });
  • 23. Dyrektywy Enkapsuluj logik zwizan z zachowaniem elementu interfejsu Tworz widgety - mae aplikacje, klocki z kt坦rych budujemy wiksze fragmenty
  • 24. 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 })
  • 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 });
  • 27. Filtry Umo甜liwiaj przeksztacenie danych w trakcie przejcia ze$scope do widoku bez zmieniania oryginalnej wartoci. 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. Wasne Filtry De鍖niowanie wasnego 鍖ltra sprowadza si dodeklaracji 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 wejciu kolejne parametry
  • 30. Formularze Element <form name="sampleform" novalidate> todyrektywa, kt坦ra dostarcza kilka przydatnych zachowa dotyczcych pracy zformularzami. Najwa甜niejszym jest obsuga 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. 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 obowizkowe</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 }
  • 33. Co dalej? wicej na temat organizacji kodu i innych dobrych praktyk: https://github.com/toddmotto/angularjs-styleguide https://github.com/johnpapa/angularjs-styleguide
  • 34. Co dalej? Regularne szkolenia w grupach 4-8 os坦b Wicej materiau Wicej case坦w Wicej elastycznoci i czasu Wicej lunchy :)
  • 36. Oraz