AngularJS Users Anonymous

HelsinkiJS August 2013 at F-Secure

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

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

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

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

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●

$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

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)

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