View
1.107
Download
0
Category
Preview:
Citation preview
Podstawy AngularJSTomek 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.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
Bowernpm 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
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 komponentów (namespaces)
• Poszczególne fragmenty aplikacji jako moduły, o hierarchii odzwierciedlonej w strukturze katalogów
Form Follows Function
OPINIA
RoutingngRoute
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
WidokZwyczajny 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 -->
demo
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
warsztat
Dyrektywy
• Enkapsulują logikę związaną z zachowaniem elementu interfejsu
• Tworzą widgety - małe aplikacje, klocki z których budujemy większe fragmenty…
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 })
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ą przekształcenie danych w trakcie
przejścia ze $scope do widoku bez zmieniania oryginalnej wartości.
1 {{ user.firstName | uppercase }}2 Jack -> JACK3 4 {{ user.createdAt | date:'dd.MM.yyyy, HH:mm' }}5 Wed Mar 05 2014 14:22:01 GMT+0100 (CET) -> 05.03.2014, 14:226 1394025721000 -> 05.03.2014, 14:227 8 {{ user.interests | orderBy:'toString()':true | limitTo:2 }}9 ['movies','sports','gaming','travel'] -> ['travel','sports']
Własne FiltryDefiniowanie 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
warsztat
FormularzeElement <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 }
warsztat
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 :)
A konkretnie?
Oraz
Pytania?
Dziękuję
Podstawy AngularJSTomek Sułkowski
Recommended