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