Download to read offline
![Backend Call
// REST API Call
-> «Add REST Client»
var url = $"{endpointUri}/Game/?countryCode={code}";
var client = new WmAPI.WmAPIClient(url);
Game[] result = client.GetAll();
<!-- TypeScript -->
-> Convert Swagger to TypeScript Class
const url = `${endpointUri}/Game/?countryCode=${code}`;
return this.http.get<Game[]>(url);](https://image.slidesharecdn.com/bastamanuelmeyerthomasgassmannvonwpfnachangular-181001082020/75/TechEvent-BASTA-von-WPF-nach-Angular-in-60-Minuten-12-2048.jpg)
Uploaded byTrivadis
TechEvent BASTA von WPF nach Angular in 60 Minuten
This document summarizes a presentation on migrating from WPF to Angular in 60 minutes. It discusses generating new projects in Visual Studio versus Angular CLI, differences in code structure and data binding between the frameworks, and tips for Angular development including prioritizing UX design, avoiding a "greenfield" rewrite, and managing coupling between components. The presenters provide resources for learning Angular and offer Angular training through Trivadis.
More Related Content
Similar to TechEvent BASTA von WPF nach Angular in 60 Minuten
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
TechEvent BASTA von WPF nach Angular in 60 Minuten
- 1. Von WPF nachAngular in 60 Minuten BASTA 2018 Manuel Meyer @manumeyer1 Thomas Gassmann @gassmannT https://m.trivadis.com/angular-schulung
- 3. Manuel Meyer Consultant &Trainer für .NET/Azure www.azurezurichusergroup.com www.dotnetday.ch www.manuelmeyer.ch @manuelmeyer1
- 4. Thomas Gassmann Senior Consultant, Trainer,Speaker www.thomasgassmann.net @gassmannT https://www.meetup.com/Swiss-Angular/
- 5.
- 6.
- 7. JavaScript «The by-design purpose of JavaScriptwas to make the monkey dance when you moused over it» Brendan Eich
- 9. New Project Visual Studio: File-> New Project F5 Angular CLI: > ng new <name> > ng serve
- 10. View Code // XAML <ButtonWidth="75" Height="20" >Search</ Button> <TextBox Height="23" Text="TextBox" Width="120"/> <!-- HTML --> <input type="text" value="text"> <button>Search</button>
- 11. Model Classes // C#POCO public class Game { public string MatchInfo1 { get; set; } public int FifaId { get; set; } } <!-- TypeScript --> export interface Game { MatchInfo1: string; FifaId: number; }
- 12. Backend Call // RESTAPI Call -> «Add REST Client» var url = $"{endpointUri}/Game/?countryCode={code}"; var client = new WmAPI.WmAPIClient(url); Game[] result = client.GetAll(); <!-- TypeScript --> -> Convert Swagger to TypeScript Class const url = `${endpointUri}/Game/?countryCode=${code}`; return this.http.get<Game[]>(url);
- 13. Data Binding // XAML <LabelContent="{Binding /MatchInfo1}"/> <ListView ItemsSource="{Binding}" DisplayMemberPath="Description" > <!-- HTML --> {{selectedMatch.GameInfo1}} <a (click)="showDetail(match)" *ngFor="let game of games$ | async"> {{ game.Description }} </a>
- 14. WPF versus Angular ▪File new Project ▪ C# ▪ XAML ▪ Controls ▪ User Controls ▪ Resource Dictionaries ▪ Commands ▪ Data Binding ▪ Value Converter ▪ ng new <my-name> ▪ Typescript ▪ HTML ▪ HTML Elements ▪ Components ▪ CSS ▪ HTML Events ▪ Data Binding ▪ Pipe
- 15. How to startwith Angular?
- 16.
- 17.
- 18. Get it from:nodejs.org
- 19.
- 20.
- 22. Angular CLI ▪ Commandline interface for Angular ▪ Build an Angular application ▪ Generate files (Scaffolding) ▪ Execute / run the application ▪ Run unit and e2e tests ▪ Prepare and «optimize» the application for deployment.
- 23. Module Anatomy of anAngular Application Component person-list Component person-detail Component person-edit PersonService
- 24. CLI: Generate newapp ng new my-app Generate a new app in /my-app ng new my-app --dry-run Report without writing files ng new my-app --skip-install Generate without npm install ng new --style scss Use SCSS instead of CSS ng new my-app --routing Generate app with routing
- 25.
- 26. CLI: Generate Component nggenerate <blueprint> Generate component/service, etc. ng g component product-list Generate a component ng g c <name> --spec=false Without unit tests
- 27. CLI: Serve andbuild ng serve Serve the app on localhost:4200 ng serve -o Serve the app and open ng build Build in dev mode ng build --prod Build in prod mode
- 28.
- 29. 4 Tipps ausder Praxis
- 30. 1. Die Spezifikationder Anforderungen «Die Spezifikation ist die alte Applikation. Das muss im Web genau so aussehen wie jetzt» --der Chef
- 31. Und tschüss… Photo credit:Mark Spearman on VisualHunt.com / CC BY
- 32. Photo credit: zoetneton Visual Hunt / CC BY …aber vielleicht kann man ja mit dem Kunden sprechen, auch wenns dauert…
- 33. Photo credit: ChrisBlakeley on Visualhunt / CC BY-NC-ND Auf jeden Fall braucht der Kunde Hilfe für UX und UI Design. Das Web ist eben doch eine andere Welt!
- 34. 2. Hilfe fürUX & UI Design Requirements for a Partner ▪ Must be strong in Web UX Design ▪ Must be strong in Web UI Design ▪ Must deliver CODE, or else…
- 36. 3. Die Utopieder grünen Wiese «Das muss man komplett neu schreiben» --Wir alle
- 37. 3. Die GrüneWiese Die Projektleiterin ist super happy mit der grünen Wiese!
- 38. Photo credit: DarronBirgenheier on Visual hunt / CC BY-SA Aber sobald die Entwickler auf der Wiese rumackern, dann ist der Spass vorbei…
- 39. Oder es kommtnoch schlimmer….
- 40. 3. Die GrüneWiese 1 «The worst strategic mistake is rewriting code from scratch» --Joel Spolsky Things you should never do: https://www.joelonsoftware.com/2000/04/06/things-you-should-never-do-part-i/
- 41. 4. The blackhole of coupling «The integration problem» & «The black hole of coupling» --Udi Dahan Own the Future: https://www.youtube.com/watch?v=2iYdKQXGY2E Slides: https://www.slideshare.net/udidahan/own-the-future
- 42.
- 43. 1. The KeyboardProblem «Mit Ctrl-N konnte man schon immer einen neuen Kunden anlegen» --der Chef
- 44. 2. The DatePickerProblem
- 45. 3. The Excelin the Browser Problem
- 46. 4. The “beiGoogle gehts auch” Problem
- 47.
- 48. Recap ▪ Most ofthe concepts are similar ▪ Its 2018. Thanks to TypeScript, we do NOT need to be afraid fo JS anymore ▪ Technologies are aligning ▪ But the Web is a different world.
- 49. Thank you Thomas Gassmann @gassmannT thomasgassmann.net thomas.gassmann@trivadis.com ManuelMeyer @manuelmeyer1 Manuelmeyer.net manuel.meyer@trivadis.com
- 50. Ressources ▪ angular.io/docs ▪ m.trivadis.com/angular ▪swissangular.com ▪ manuelmeyer.net ▪ thomasgassmann.net
- 51. https://m.trivadis.com/angular-schulung Mit Trivadis zumAngular Superhero