Angularing it up


Ryan Seddon

SEEK Mobile Web App


Choosing the right tool


  • Prototyped in Backbone, Angular & Ember
  • Ember was in API flux
  • Angular has emphasis on testing
  • Docs were good
  • It was fast to prototype

1. Go unstable

  • it's just better, not actually unstable
  • animations
  • interceptors
  • promises on $resource
  • CORS works better
  • ng-mobile

ng-mobile

  • Originally had our own tap directive
  • Was simple in the beginning
  • Ghost clicks, rage face
  • ng-mobile handles this for you!
  • Use it!

2. Form validation

  • It gets ugly fast
  • Turn off html5 form validation "novalidate"
  • Validating checkbox groups was interesting

Validating checkbox groups

  • Init model as array, all checkboxes push to array
    
$scope.checkboxGroup = [];
  • Utilise ng-[true/false]-value directives
  • Add an expression to ng-required 
    $scope.$watch('checkboxGroup', function(data){
 // compact array as unchecked will add null
 // change expression to true or false based checked values.
});

2. View inlining

  • Custom build task to inline views
  • A whole lotta script tags
  • put inside $templateCache at build
  • Part of lower level $cacheFactory

3. $digest issues a.k.a Angular reflux

  • $cookieStore and Set-Cookie Header
  • $digest wouldn't run use $timeout for nextTick
  • Make ng-repeaters dumb
  • Do data transforms on return of $resource or $http
  • e.g. dont do this "date | shortDate"
  • use $filter instead directly.

4. working with partials

  • ng-include can clean up a view
  • ...but be careful Angular reflux can bite
  • same origin only
  • service pulls in partial and inject into container
  • sk-compile directive to take html and Angularize™
  • API limitation for the moment

5. CSS

  • What?
  • Good CSS architecture is important
  • We used BEM, Block, Element, Modifier
  • Worked amazingly well
  • 98% of our selectors are single classes
  • We don't go deeper than 3

Thanks

https://slid.es/ryanseddon/angularing-it-up/

Angularing it up

By Ryan Seddon

Made with Slides.com

Angularing it up

Lessons learned from building a complex Angular web app. Quirks findings and sweeping recommendations

  • 1,516

More from Ryan Seddon