Prezentacja wykładu z serii Hack your Career - Angular stań się kanciastym

1. Angular – stań się kanciastym

2. Agenda

3. Hack Your Career
• Wstęp do programowania w chmurze przy użyciu
Kubernetes'a
Wykłady - AEiI
(14:00 – 15:30, s.428)
Warszaty – SAP Hybris
(17:00 – 18:30, s. Death Valley)
10.04
19.04 • Tworzenie testowalnej aplikacji, czyli TDD w praktyce
25.04• Bots everywhere
10.05 • Angular – stań się kanciastym
23.05
30.05
05.06
• Troubleshooting przy pomocy Spring AOP
• Ghost in the shell
• DevOps - czyli jak przestałem klikać i pokochałem
automatyzację
https://fb.com/Hack.your.Career Zarejestruj się na wydarzenie

4. Top ecommerce,
marketing, billing
Najlepszy Pracodawca
2017 w rankingu AON
Jedno z 20 centrów
SAP’s Labs Network
> 350 pracowników
Development: Go, Java,
Cloud Native solutions

5. Slajd o prowadzących
• Edyta Sporysz
Ÿ Web developer with two years of experience
focused mainly on AngularJS and Angular
frameworks.
• Dariusz Jagieło
• Backend dev becoming full stack after
5 years of working in Java world.
• Ivijan Hađija
• Enthusiastic web developer with a passion
for JavaScript related technologies.

6. Co to jest Angular?

7. Angular = MVC?

8. Czy jest nam potrzebny?
• Dlaczego Angular, a nie czysty Javascript
lub jQuery?
• Boom JavaScript SPA Frameworków…
• Zalety TypeScript-a

9. TypeScript

10. Angular framework - a hero to make your life EASIER

11. Historia Angulara
Dawno, dawno temu….
Prawie 10 lat temu!
• Misko Hevery (developer @Google)
Przełomowe wersje w rozwoju Angular:
• AngularJs 1.x ->
AngularJs 1.5.x ->
Angular 2 ->
Angular 4 ->
Angular 5 ->
Angular ??

12. Angular teraz
• TypeScript-based open-source
front-end web-application platform
• jest rozwijany przez Google i
społeczność deweloperów
• kompletne przepisanie w v2
• Stackoverflow statystyki 2018
• https://insights.stackoverflow.com/survey/2018
• #technology-frameworks-libraries-and-tools

13. angular-cli

14. Zalety angular-cli
• Project generation
• Code generator for:
• components, directives, classes, modules, services, etc.
• Build generation
• Unit test runner
• End-to-end test runner
• Easy local development
• Linting
• CSS pre-processor support
• JIT/AOT compilation
• ng new
• ng init
• ng generate
• ng build (--prod)
• ng test
• ng e2e
• ng serve

15. angular-cli demo
• Przykład tworzenia aplikacji/komponentu/serwisu
• Dokumentacja: https://github.com/angular/angular-cli/wiki/generate

16. Aplikacja demo

17. Angular – The Big Picture

18. @NgModule

19. Wprowadzenie do komponentów, dyrektyw i formularzy
• Przykład komponentu i jego szablonu
• Przykład dyrektyw
• Przepływ danych między klasą komponentu i jego szablonem
• Przykład prostego formularza
• Komunikacja między komponentami

20. Komponent i szablon - DEMO

21. Dyrektywy
• Komponenty – dyrektywa z szablonem
• Dyrektywy atrybutu – dyrektywy zmieniające zachowanie/wygląd elementu,
komponentu, innej dyrektywy, np.: ngClass, ngStyle, ngModel
• Dyrektywy strukturalne – dyrektywy dodające/usuwające elementy
DOM, poprzedzane symbolem "*", np.: *ngIf, *ngFor
<a *ngFor="let weatherItem of weatherItems" >
<app-weather-item [weatherItem]="weatherItem"></app-weather-item>
</a>

22. Bindowanie danych – komunikacja między komponentem i
szablonem

23. Bindowanie danych – DEMO

24. Budowa formularzy – template driven forms
<form (ngSubmit)="add()">
<label for="city">City</label>
<input type="text" name="city" id="city" (input)="onSearchLocation(input.value)"
required #input [(ngModel)]="cityName">
<button type="submit" [disabled]="weatherItem == null">Add</button>
</form>

25. Budowa formularzy – stylowanie formularza w zależności od
stanu elementu
Angular automatycznie dołącza klasy css do elementu formularza w zależności od jego stanu, np.:
• .ng-valid
• .ng-invalid
• .ng-pristine
• .ng-dirty
• .ng-touched
• .ng-untouched

26. Komunikacja komponentów
• Dekoratory @Input oraz @Output
• Dekorator @ViewChild
• Serwis

27. Komunikacja komponentów - DEMO

28. Przerwa na kawę ;)

29. SPA – Single page application

30. SPA - Problemy
• URL do konkretnego widoku aplikacji
• Nawigacja przez guziki/hiperłącza
• Nawigacja przeglądarki – wstecz/w przód

31. Routing w aplikacji demo

32. Routing i nawigacja

33. Routing i nawigacja - konfiguracja
1. RouterModule - ng generate module app-routing --flat --module=app
2. Stworzenie Routes
3. Konfiguracja RouterModule.forRoot(routes)
4. <router-outlet></router-outlet>

34. Routing i nawigacja
Kod + demo

35. Serwisy – po co?
• Komponenty nie powinny zajmować się pobieraniem i zapisywaniem danych
• Wydzielenie wspólnej funkcjonalności
• Komponenty powinny być najprostsze jak to możliwe
• Usunięcie zależności, ukrycie szczegółów implementacyjnych
• Bo Angular Style Guide tak mówi https://angular.io/guide/styleguide#05-15 J
• Jak dodać serwis? à Angular CLI – ng g service my-service

36. Programowanie reaktywne
• ReactiveX à RxJS
• Połączenie najlepszych idei z:
o Observable, czyli wzorca Producent
o Wzorca Iterator
o Programowania funkcyjnego

37. Komunikacja HTTP
• Http(Angular < v4) à HttpClient (XHR przeglądarki)
• Testowalność (HttpTestingModule)
• Typowane żądania
• Interceptory żądań i odpowiedzi
• Odpowiedź jako strumień (Observable)

38. Demo (kod + aplikacja)

39. Źródła
• https://angular.io
• https://frontendmasters.com
• https://danielmiessler.com/study/mvc/
• https://blog.codewithdan.com/2017/08/26/5-key-benefits-of-angular-and-typescript/
• http://reactivex.io/

40. QUIZ

41. Kogo szukamy?
Profesjonalistów
• Cloud Software Engineer
(Cloud Native Solutions, Go, NodeJS)
• Cloud Service Engineering
(Automation and orchestration tools, python, shall)
• Java Engineer and Developer
(Java, Spring Core, Boot and Cloud, Web Services)
https://goo.gl/sN3Jyf
Aplikuj tutaj
Studentów
• Hack Team
(3 months internship, 2 teams realizing dedicated projects)
• Cloud Software Engineer - intern
(Cloud Native Solutions, Go, NodeJS)
• Technical Account Support - intern
(Manage, escalate and drive resolution of customers’ support)
• QA Analyst - intern
(Automated, Exploratory tests)
• DevOps Engineer
(Bash, Groovy, Python, Ruby, Go)

42. Networking session J
Opcja 1
• Zapraszamy na zwiedzanie biura
Opcja 2
• Q&A z naszymi prowadzącymi
Opcja 3
• Speed Interviews

43. Thank You