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

Like this? Share it with your network

Share

Tips from angular js users anonymous

on

  • 1,416 views

Some tips on using AngularJS from the HelsinkiJS JavaScript meetup.

Some tips on using AngularJS from the HelsinkiJS JavaScript meetup.

Statistics

Views

Total Views
1,416
Views on SlideShare
1,370
Embed Views
46

Actions

Likes
0
Downloads
3
Comments
0

3 Embeds 46

http://lanyrd.com 24
https://twitter.com 21
http://tweetedtimes.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tips from angular js users anonymous Presentation Transcript

  • 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 ● egghead.io - watch the videos ○ thinkster.io ● 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 egghead.io: the dot