Podstawy AngularJS

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' }); })

http://plnkr.co/edit/u18KQc

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

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

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

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

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

Internet

Podstawy AngularJS