Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular Fra hello world til en fullverdig app

327 views

Published on

Presentasjon om Angular for et foredrag holdt for NNUG i Trondheim

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Angular Fra hello world til en fullverdig app

  1. 1. Forside AngularJS - Hvordan gå fra "Hello World" til en fullverdig applikasjon med AngularJS
  2. 2. Arnstein Johansen @G0ldnarms /in/arnsteinjohansen /goldnarms
  3. 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. 4. Kjernefunksjonalitet til AngularJS • • • • • • Toveis binding Modules Controllers Directives Services Dependency injection
  5. 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. 6. Hvordan strukturere sitt prosjekt • • • • Filstruktur Moduler Rydde opp i kontrollere “Namespace”
  7. 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. 8. Responsiveness • • • • • • link vs. compile $broadcast vs. $emit $watch $apply ng-if vs. ng-show ng-bind, ng-model +++ vs. bind-once
  9. 9. Best served with … • • • • • • • Karma Protractor Batarang Typescript Breeze Underscore.js Angular UI
  10. 10. Ressurser • • • • EggHead.io Pluralsight ng-learning (GitHub) ng-newsletter

×