Angular Best Practices Door Alex en Chris van Beek
Over ons Enthousiastelingen Software Architecten bij Luminis Arnhem B.V. Gespecialiseerd in Microsoft technologie:.net, Azure en Windows Twitter: @Beekje en @cbeek Blog: http://arnhem.luminis.eu/alex-van-beek/ en http://arnhem.luminis.eu/chris-van-beek
Inleiding Veel ervaring met grote Angular projecten Elk project worden er nieuwere en beter tools, technieken en methodes toegepast Hieruit ontstaat een vaste set best practices die wij graag met jullie willen delen!
Inhoud Applicatie structuur Typescript Controller As Angular-Translate One time bindings Angular UI Router Module laders Front-end build
Applicatie structuur Folders by feature structure Structuur blijft plat Ontwikkelaars kunnen aan namen van folders en bestanden zien wat code voorstelt
Applicatie structuur:demo
Inhoud Applicatie structuur Typescript Controller As Angular-Translate One time bindings Angular UI Router Module laders Front-end build
Typescript Javascript is zeer krachtig en flexibel.. Maar gestructureerd en object georiënteerd javascript kan erg moeilijk zijn Er is geen statische typering, tooling heeft het moeilijk met ondersteunen van ontwikkelaars Er is geen modularisatie systeem in javascript Los deze problemen op Door Typescript te gebruiken!
Typescript demo: Typescript playground Applicatie bekijken met Typescript: Controllers, implement UserCtrl Services
Inhoud Applicatie structuur Typescript Controller As Angular-Translate One time bindings Angular UI Router Module laders Front-end build
Gebruik en begrijp de As syntax Bind controllers aan views met de As syntax Voorkomt scope clashes Maakt het makkelijker om parent controller te benaderen vanuit child views (UI-Router) ICM Typescript, geeft ons WPF achtige databinding aan objecten
Demo As syntax Bekijk scope clashing Voorkom scope clashing Bekijk het effect op $scope Controller wordt zelf object op de scope!
Inhoud Applicatie structuur Typescript Controller As Angular-Translate One time bindings Angular UI Router Module laders Front-end build
Angular Translate Vertalingen in Angular, makkelijk gemaakt Zorgt voor onderhoudbare teksten in je app Te vergelijken met resource files in.net
Demo Angular Translate Angular-Translate aan je app toevoegen Config aanroep toevoegen Pagina vertalen Taal wisselen
Inhoud Applicatie structuur Typescript Controller As Angular-Translate One time bindings Angular UI Router Module laders Front-end build
One time bindings Beperk de watch collectie waardoor de $digest sneller wordt!
Demo: One time bindings Bekijk de syntax Zie een hele kleine performance winst, meer read only data op de pagina is meer winst! Handig icm Angular translate! Kunt testen door te profilen en naar $digest te kijken
Inhoud Applicatie structuur Typescript Controller As Angular-translate One time bindings Angular UI router Module laders Front-end build
Angular UI Router Ondersteunt nested views Koppelt URL s los van applicatie state Applicatie wordt een state machine States kunnen gekoppeld worden aan Url s of aan gedrag of aan beiden
Angular UI Router demo: Nested views States configureren Resolve OnEnter PatientenOveview en PatientOverview
Inhoud Applicatie structuur Typescript Controller As Angular-translate One time bindings Angular UI router Module laders Front-end build
Gebruik een module lader Javascript kent geen module systeem Kan een enorme brei worden van script tags die precies in de juiste volgorde moeten staan binnen je html pagina's. RequireJS of Browserify Typescript kent RequireJS!
RequireJS Vereist een specifieke structuur in je javascript bestanden Kan ook overweg met javascript libs die geen weet van Require hebben (zoals Angular)
RequireJS Demo: Bekijken de html Configuratie voor RequireJS Typescript code Bekijk gecompileerde typescript code
Inhoud Applicatie structuur Typescript Controller As Angular-translate One time bindings Angular UI router Module laders Front-end build
Gebruik een front-end build proces We zijn gewend MSBuild te gebruiken Front-end build tools ondersteunen meer en beter typische web build taken Typescript compilatie SSAS compilatie Uglyify en concateneren van code Angular tweaks (zoals TemplateCache!) Zijn NodeJS plugins
Front-end build tools Gulp Sneller (streams vs kopieren en open/sluiten van bestanden) Code over configuratie Draait om streams die van de ene taak naar de andere gestuurd kunnen worden. Kunt zelf alles mixen en matchen Grunt Configuratie over code Draait om veel gebruikte taken die in een bepaalde volgorde uitgevoerd worden
Demo: Gulp Bekijken gulp bestand en lopen de best practices na Bespreken taken die je per se in front-end build wilt hebben. Typescript compilatie RequireJs Concat Mangling Angular template caching
Vragen?????
Your feedback is important! Scan the QR Code and let us know via the TechDays App. Laat ons weten wat u van de sessie vindt via de TechDays App! Scan de QR Code. Bent u al lid van de Microsoft Virtual Academy?! Op MVA kunt u altijd iets nieuws leren over de laatste technologie van Microsoft. Meld u vandaag aan op de MVA Stand. MVA biedt 7/24 gratis online training on-demand voor IT- Professionals en Ontwikkelaars.