Tips from angular js users anonymous

1,397 views

Published on

Some tips on using AngularJS from the HelsinkiJS JavaScript meetup.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,397
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tips from angular js users anonymous

  1. 1. AngularJS Users Anonymous HelsinkiJS August 2013 at F-Secure
  2. 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. 3. Docs ● official docs are not so good ○ OK as reference ● start with (angular-)seed project ○ or Yeoman generator ● egghead.io - watch the videos ○ thinkster.io ● stackoverflow once you hit the wall
  4. 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. 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. 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. 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. 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. 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 egghead.io: the dot

×