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.

Nnug angular

295 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Nnug angular

  1. 1. Forside
  2. 2. Frederik Nakstad/fnakstad/in/fnakstadfrederiknakstad.com
  3. 3. • JavaScript rammeverk for å lage SPA• Påbegynt av Miško Hevery i 2009• Open-source på Github• Agnostisk iht. server-side rammeverk• Regresjonstester kjøres på IE 8 >=
  4. 4. Grunnleggende Konsepter• Data binding• Directives• Scope• Dependency Injection
  5. 5. Data Binding
  6. 6. Data Binding
  7. 7. Scope
  8. 8. Directives<span ng-bind="exp"></span><span class="ng-bind: exp;"></span><ng-bind></ng-bind><!-- directive: ng-bind exp -->
  9. 9. Directives<map location="venue.location"static-map="venue.staticMap"type="roadmap"></map><google-map center="center"draggable="true" zoom="zoom"markers="markers" mark-click="true"style="height: 400px"></google-map>
  10. 10. Dependency Injection1. // App-level module, has injector2. var myApp = angular.module(myApp, [dependency]);3.4. // Attach custom service to app5. myApp.factory(Math, function() {6. return {7. add: function(x, y) { return x + y; },8. subtract: function(x, y) { return x - y; },9. pi: 3.14159265359,10. e: 0.577215664911. };12.});13.14.myApp.factory(Circle, function(Math) {15. return {16. circumference: function(r) { return 2 * Math.pi * r; },17. area: function(r) { return Math.pi * r * r; }18. };19.});
  11. 11. Skeptisk...
  12. 12. Nyttige ressurser og verktøy• Angular.js sin offisielle dokumentasjon• Angular-UI• Batarang Chrome extension• Angular-seed på GitHub• Testacular/Karma• Egghead.io video tutorials

×