Angular Fra hello world til en fullverdig app
•Als PPTX, PDF herunterladen•
0 gefällt mir•407 views
Presentasjon om Angular for et foredrag holdt for NNUG i Trondheim
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Angular Fra hello world til en fullverdig app
Ähnlich wie Angular Fra hello world til en fullverdig app (20)
Angular Fra hello world til en fullverdig app
- 1. Forside AngularJS - Hvordan gå fra "Hello World" til en fullverdig applikasjon med AngularJS
- 3. Agenda • • • • Kjernefunksjonalitet i AngularJS Hvordan komme kjapt i gang Hvordan strukturere sitt prosjekt Hvilke rammeverk / verktøy bør brukes med AngularJS • Snubletråder • Responsiveness • Ressurser
- 4. Kjernefunksjonalitet til AngularJS • • • • • • Toveis binding Modules Controllers Directives Services Dependency injection
- 5. Hvordan komme i gang • • • • • • • AngularSeed (NuGet, Git) HotTowel (NuGet) ng-boilerplate (Git) MEAN (Git) SideWaffle (NuGet) Bower (http://bower.io/) ng-modules (http://ngmodules.org/)
- 6. Hvordan strukturere sitt prosjekt • • • • Filstruktur Moduler Rydde opp i kontrollere “Namespace”
- 7. Snubletråder • Error: 10 $digest() iterations reached. Aborting! • Error: '$apply already in progress‘ https://github.com/yearofmoo/AngularJS-Scope.SafeApply • Minnelekkasje $scope.$on("$destroy", function() { this.$scope = $scope = null; }); • Debugging .fail(function(e){ $log.error(e.errorMessage); }); • Minification KontollerCtrl.$inject = [‘$http’, ‘service’] app.Controller(‘KontrollerCtrl, KontrollerCtrl - eller app.Controller(‘KontrollerCtrl’, [‘$http, ‘service’, KontrollerCtrl]);
- 8. Responsiveness • • • • • • link vs. compile $broadcast vs. $emit $watch $apply ng-if vs. ng-show ng-bind, ng-model +++ vs. bind-once
- 9. Best served with … • • • • • • • Karma Protractor Batarang Typescript Breeze Underscore.js Angular UI
Hinweis der Redaktion
- Toveis data bindingen noe som bare fungerer og sparer masse kode. Det er spesielt via ngmodel direktivet at man drar nytte av dette. Holder modellen i sync både i dine controllere og i view. Moduler kan best beskrives som en container. Man vil ikke få et eget namespace, kan føre til problemer. Man kan ha moduler inne i andre moduler. Det betyr selv om man har to kontrollere i forskjellige moduler, så vil det skape konflikt hvis man gir de samme navn og bruker begge modulene i samme app. Kontrollere viktig i enhver MVC rammeverk. De kan skrives på to forskjellige måter. Med angular 1.1.5 så begynte det å komme støtte for controller as syntax, men det var ikke før versjon 1.2 at det ble skikkelig integrert. Lettere å skrive god kode med controller as syntaxen.Noe som skiller angular fra de andre rammeverkene er directives. Brukes for å lage et interface mot DOM, enten når du vil ha en widget, en HTML oppførsel eller en wrapper for f.eks. jquery.Direktiv lar deg lage egne komponenter som kan gjenbrukes overalt i løsningen. Angular har mange nyttige direktiv i sitt bibliotekt, men enhver løsning i litt større skala vil på et eller annet tidspunkt måtte skrive sine egne. Ypperlig for kode reuse. Serviceer i hovedsak kun et objekt med metoder og properties som kan gjenbrukes. AngularJs kommer med mange services og noen blir ofte brukt. En app trenger ikke å bli stor før man kommer til et punkt der man må begynne å skrive sine egne services. Perfekt for å samle forrtningslogikk i en beholder og for reusability. Services er singeltons. I Angular så kobler man sammen kontrollere og services med dependencyinjection, det betyr at når man lager en kontroller, så kan man spesifisere hvilke services man har behov for.
- En grei plass å starte hvis man kun skal lage en veldig enkelapp kan være AngularSeed, kan enten installere via git eller Nuget. Den promoterer ikke best practises og bør kun sees på for å lære seg det mest basic’e.HotToweler en mer komplett template, har en annen struktur som baserer seg på features. Her samler man filene basert på hvilken feature det er del av, har både services, kontrollers og templates i samme mappe. Du får også med en veldig grei eksempel på en app. Installeres via nuget.Ng-boilerplateer i samme gaten, større community rundt seg. Installere via git og bower. Må ha node. Kommer med tester ferdig konfigurert til å kjøre med Karma. Kjør grunt for å pakke sammen app.MEAN er en annen starter template, baser seg på Mongo, Express, Angular og Node. Den er ikke feature basert, men samler alle kontrollere i en mappe osv Installer via node.http://mean.io/Sidewaffle, det er ikke en boilerplate, men en extension til visual studio som gir deg templates for controllers, modules, directives og services.Bower er en package manager for web, ala nuget. Installeres via node npm, kan installere githubrepos eller bower pakker. Finnes mange pakker for angular.Man kan finne mange ferdig lagede moduler på ng-modules. Ligger over 400 angular moduler klar til bruk.
- Filstruktrur. Snakket litt om det på forrige slide. Og her må man se an størrelsen på prosjektet. I mange tilfeller så vil en struktur der man skiller på kontrollere og servicesosv fungere, i større prosjekter kan det hende at feature strukturen er bedre og for veldig store prosjekter kan man også ha et nivå men subfeatures.Moduler er en annen måte å bokse inn større prosjekter. Kan samle kontrollere og services i som hører sammen i en modul. Gjør det også mulig å gjennbruke moduler i andre prosjekter uten at man trenger å hente inn en hel app. Modulere kan isolere komponenter og gjør det enklere å teste. Man kan f.eks. lage en modul per direktiv slik at man kun trenger å hente inn den moduelen for å kjøre en test.I prosjekter med masse funksjonalitet så er det lett at man får store fete kontrollere, her gjelder samme prinsippene som i andre mvc rammeverk, prøv å hold de så tynne som mulig. Det er flere muligheter man kan løse dette, f.eks. med mixins, men det beste valget er og da er det å trekke ut mest mulig i services.Gi «namespace» til direktiv og kontrollere slik at de ikke kolliderer med andre. Angular sine direktiv har ng-forran seg. Hvis man har to direktiv med samme navn vil de begge kjøre, noe som kan gi merkelig resultat hvis man ikke er klar over dette.
- Vanlig feilmeldingen, det skjer typisk hvis man har en watch på noe som igjen kan bli oppdatert etter en digest. Slik at angular aldri blir ferdig med å kjøre digest da noe altid er dirty.Dette er en feil man kan lett dukke bort. Og skjer hvis man prøver å kalle en apply mens en digestphaseallerede er i gang. Man kan enten foreta en sjekk om man er i en phaseosv.https://github.com/yearofmoo/AngularJS-Scope.SafeApplyJavascript sin garbagecollectionfungererikkepå same måtesom I feks c#. Og man må man selvpassepå å frigjøre ting som ligger på scope når de ikkeerlengrebehov for. Vi varnøtttil å gågjennomvårkode for vi så at appenvårspistemerogmeravminnet. Debugging I angular kanvære en pain. Værflinktil å brukelogtil å loggefeil.Minification. Noe er lett å glemme, man sitter å lager en ferdig app og oppdager dagen man skal gå i prod og begynner å minifiserer koden at ingen ting fungerer. Da er det bedre å tenke på det fra dag en. Være obs på at flere eksterne moduler ikke har tenkt på dette og skrevet kode som ikke er minifiserbar. Dette er et eksempel på en kontroller, men dette går igjen i de andre delene av angular også.
- Vitnår man skalbruke link og compileCompile kjøres før $scope er tilgjengelig og kun en gang, uavhengig av hvor mange direktiv man har av samme sort. Hvis man skal gjenbruke en template mange ganger, så bør man gå for compile.Link kjøres en gang per direktiv, derfor bør man flytte mest mulig jobb inne i compile steget. Man vil i de fleste tilfeller bruke link, og det vil gå helt fint hvis man ikke repeterer det samme direktiv mange ganger.Broadcast og emit brukeshvis man vilsende data fra en controllertil en annen. Både broadcast og emit målyttespåiden kontrollerensomskalmottaeventen men en $on. broadcast sender en event tilallechild scopes, og børunngåeshvis man erpårootscope, da den vilsendeuttilalle scopes. Emit sender oppover via scope hieraki. Man børistedebrukeemittil å kommunsere der determulig. Måhuskepå å unbindeetter at $scope blir destroyed.var unbind = $rootScope.$on('someComponent.someCrazyEvent', function(){ console.log('foo'); }); $scope.$on('$destroy', unbind); }$watch unngå deep watchingObspå watch, $applyBruke digest istede for applyng-if istede for ng-showFærrebindinger, ikkenoe dirty checkingng-bind, ng-model sjekkerheeeeletiden, kanvurdere bind-oncepå alt man ikketrenger å oppdatereetter at man harpresenterteførstegangen.https://github.com/Pasvaz/bindonceBind once kommeri 1.3, man harogså en mellom ting: fast-bind, somer et egetbibliotekskrevetav en på angular teamet.Digest. dirty checking, loopergjennom alt. gjør
- KarmaRasktestrunner basert på jasmin, kan spesifisere hvilke nettlesere den skal kjøres i, en eller flere.http://karma-runner.github.io/0.8/plus/AngularJS.htmlProtractorE2E test, helt ny. Bygget for angular, kan søke opp elementer etter binding, name osv. Kjapphttps://github.com/angular/protractorBatarangExtension til chrome, bra for å avdekke avhengigheter, hva som sluker minne, identifisere områder man kan forbedre ytelsehttps://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfkTypescriptVi skriver all vår angular kode i typescript, føler at dette gir oss masse, bare det at all kode må kompilere sparer oss for masse tid, raskere til å identifisere bugs. Resharperhar støtte for typescript samt web essensial gjør det å jobbe med typescript i visual studio smertefritt.http://www.typescriptlang.org/Breeze, alternativ til $http, ligger som et lag mellom din ORM på server siden og din javascript kode. Kan cache resultat fra databasen, odataquerysyntax, passer ypperlig med angular, async, promises.http://www.breezejs.com/Et hvert javascriptprosjket av litt størrelse kan ta nytte av underscore. Gir oss Ecmascript 5 funksjoner der det er støttet, og en fallback der det ikke er. Gjør jobbing mot collections til en enkel sak.http://angular-ui.github.io/Angular UI har flere moduler som kan få deg kjapt oppe å gå med grensnitt kodene. Har en egen pakke med Bootstrap komponenterhttp://angular-ui.github.io/
- http://www.egghead.io/http://pluralsight.com/8 kurs for angularhttps://github.com/jmcunningham/AngularJS-Learning?source=chttp://www.ng-newsletter.com/