Tips from angular js users anonymous

Tips from angular js users anonymous

• 1.
  AngularJS Users Anonymous HelsinkiJS August2013 at F-Secure
• 2.
  Topics ● how toread 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 docsare 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 howto 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. ● writetests ● 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