Some tips on using AngularJS from the HelsinkiJS JavaScript meetup.

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