Slides from a talk at ngAarhus on how you can still build great stuff with AngularJS.

1. Supercharging
AngularJS
lessons learnt, experiences, best practices…
for building modern AngularJS 1.x apps
@IMPACTdigitaldk

2. AngularJS and
Angular

3. Filip

4. #weAreHiring #Denmark

5. https://developers.google.com/experts/people/filip-bruun-bech-larsen

6. lets talk about
AngularJS

7. Why best practices
• for better apps
• less errors
• better performance
• better team-work
• more fun
• to get closer to ng2

8. Change your vocabulary
• Components (element-selector + template)
• Directives (attribute-selector + never template)

9. think of your app as a
tree of components

10. A tree of components
my-app
app-navigationcontact-list
contact-item
toggle-favorite
contact-item
toggle-favorite
contact-item
toggle-favorite

12. Think in Smart/Dumb
stateful
stateless

13. Data down and events up

15. Business logic and data
live in services
when you are calling $http from a component - you are doing it
wrong

16. go for consistency in
data-calls
so probably async, if any of it is…

17. Treat directives like
components
don’t use link(), don’t use replace

18. $scope

19. What is it with scope
inheritance/isolation and performance

20. don’t use scope/$scope
go for ctrlAs-syntax (default on components)
if you really need an event-system, scope can be ok

21. when things are
slow…you are probably doing it wrong

22. don’t ever $watch
$doCheck() does it better, but you should probably
refactor

23. $apply is the root of all
evil
ng-* event-listeners, $http, $q.resolve, $q.reject, $timeout,

24. default to ::bindings
upgrade only as needed
or maybe just put the data in the template-string directly

26. One-time
is not
one-way

27. one-way bindings are
a special input-binding
its almost like two way bindings (=), except for when you
change the reference from inside the component.
http://codepen.io/filipbech/pen/pNLPdN

28. {{avoidThese}}
use ng-bind so the expression is cached

29. and don’t use ng-include
subcomponents are almost twice as fast

30. Remember to do clean-up
remove event/message listeners and pointers in
$onDestroy

31. http://codepen.io/filipbech/pen/gLegyx?editors=0010

32. Watch out for filters in your
template
they are run more often than you think

33. http://codepen.io/filipbech/pen/qqomQQ?editors=0010

34. ng-repeat
use trackBy and ::binding

35. Consider typescript
for ES6 and for the types

36. Consider Observables
with RxJS 5

37. what about modules
angular modules, es6-modules, AMD etc…

38. Manage your state
consistently
consider redux, observables or roll your own system

39. files, methods, variables, etc.
Avoid ng and $ in your own names
Commit to a naming-scheme

40. DI on separate lines
so you’ll have pretty diffs

41. Use the newest
angularJS-release

42. AngularJS in
production
obviously concat, minify, gzip, etc…
but also: use provided .min bundle,
disable debug info, disable comment/class directive
https://docs.angularjs.org/guide/production

43. so what do you think…
questions, thoughts, comments?

44. Thank you
I’ll tweet a link to the slides in a minute
@IMPACTdigitaldk
@filipbech