Your SlideShare is downloading. ×
Tips from angular js users anonymous
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Tips from angular js users anonymous


Published on

Some tips on using AngularJS from the HelsinkiJS JavaScript meetup.

Some tips on using AngularJS from the HelsinkiJS JavaScript meetup.

Published in: Technology, Business

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. AngularJS Users Anonymous HelsinkiJS August 2013 at F-Secure
  • 2. Topics ● how to read the docs: angular seed ● how to structure apps and use modules ● what to put in templates/views ○ ng-cloak, ng-if, ng-show ;-) ○ routing, ng-view, ng-include ● what to attach to $scope, scope inheritance ● how to talk to server: $http, $resource, $q ● when to use factories, services, events ● when/how to create directives ○ wrapping jQuery plugins or just jqLite? ○ picking existing components; $apply/$timeout ● how to set up/run tests
  • 3. Docs ● official docs are not so good ○ OK as reference ● start with (angular-)seed project ○ or Yeoman generator ● - watch the videos ○ ● stackoverflow once you hit the wall
  • 4. Structuring apps & modules ● use array syntax for injection ○ [‘$scope’, function($scope) {}] ● use Grunt or some other asset pipeline ○ Require also works ● component based structure in big projects ○ dirs are components (files for small projects) ● use different modules only if you need to share code between projects ● services for data, controllers for logic, directives for rendering/views ● don’t use the global scope
  • 5. Templates & Views ● use ng-bind if you want IE support ● ng-if instead of ng-show if you want to keep the DOM clean ● use prangler template preloader ○ npm install prangler ○ or just populate template cache yourself ● lack of ifs in views tricky ○ use ng-show, ng-switch ● factor logic out of templates, use scope methods
  • 6. Scopes ● don’t pollute $rootScope ● read up on what creates a scope ○ ng-repeat, other directives ● initialize scope variables ○ so it doesn’t get initialized by child by accident ● don’t use duplicate variable names ● don’t attach too much stuff to scopes ● dont attach duplicate methods to scopes ● use isolate scopes for directives ●
  • 7. $http, $resource, services, events ● don’t use jQuery :) ● don’t $resource unless you need to ● don’t store UI state in services ● avoid callbacks by using $q/promises ● if you need REST, look into restangular (resource service replacement) ● consider refactoring $http etc. out of controllers ● user $attribute notation for “private” vars ● consider $watch as an alternative to events ● $event to inject DOM event
  • 8. Directives ● learn how to use them, don’t be afraid to write your own ● use them if you want to modify DOM in any way ● use correct scope (isolate scopes?) ○ use correct prefixes =, ? etc. -> read up on that!!! ● have “destructors” i.e. clean up afterwards ● if you get $digest errors, use $timeout or safe apply (you need to write this yourself)
  • 9. Tests etc. ● write tests ● use Batarang Chrome extension ○ shows how expensive your watches are ● use Karma test runner ○ does work in IE ● use the dot ○ {{data.whatever}} - bind objects, not values ■ look up on the dot