Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Everything You Always Wanted to Know About AngularJS But Were Afraid to Ask

Everything You Always Wanted to Know About AngularJS But Were Afraid to Ask

About top AngularJS caveats and bad practices.

This presentation was given during meet.js Szczecin on 10th March 2015.

Michał Miszczyszyn

March 10, 2015

More Decks by Michał Miszczyszyn

Other Decks in Programming


  1. AngularJS caveats 1. project structure 2. jQuery and jqLite 3.

    interacting with ng 4. global services 5. service vs factory 6. $scope 7. dependency injection 8. communication
  2. project structure • at the beginning – no recommended project

    structure • by default apps were divided into: controllers, services, directives…
  3. project structure • it's perfectly fine for small applications •

    The caveat: it doesn't work for larger apps • a blog post from February 2014 changed it: • https://blog.angularjs.org/2014/02/an- angularjs-style-guide-and-best.html
  4. jQuery and jqLite • $ is undefined? • Error: Looking

    up elements via selectors is not supported by jqLite! • (even with jQuery included*)
  5. jQuery and jqLite • The caveat: jqLite is not jQuery

    • jqLite provides a limited set of functionalities from jQuery • if you want to use jQuery, include it before angular.js file
  6. jQuery and jqLite • The caveat: jqLite is not jQuery

    • jqLite provides a limited set of functionalities from jQuery • if you want to use jQuery, include it before angular.js file
  7. interacting with ng • Angular makes a lot of things

    easier • (duh) • The caveat: for anything to work with Angular it has to be done
 The Angular Way®
  8. interacting with ng • many people ask why this won't

    work $('input') .attr('ng-model', 'name'); • you shouldn't try to interact with Angular from the outside • use directives instead
  9. global services • you can use any other libraries with

    Angular • The caveat: You should wrap them in angular service
  10. global services • eg. Underscore • you can simply access

    it in your controllers: app.controller('Ctrl', function(){
 }); • but it's wrong!
  11. global services • much harder to write unit tests •

    impossible to change the implementation • you want to use DI for this
  12. service vs factory • angular brings a lot of new

    concepts • one of them are services, factories and providers • the caveat: many people find it hard to understand how to use them
  13. service vs factory • factory expects a function as an

    argument • service expects a constructor • provider is more complicated • all return singletons
  14. $scope • The caveat: everything • a "mystical" object •

    there's a lot of confusion about it • quick example
  15. $scope • authors of Angular used to advice: • ”if

    you use ng-model there has to be a dot somewhere. If you don't have a dot, you're doing it wrong”
  16. $scope • more generic solution • property on the scope:

    $scope.MyCtrl = $scope;
 <input ng-model="MyCtrl.x">
  17. $scope • this solution is ugly and there's still room

    for bugs • …so what's $scope even for? • ? • we can do without it!
  18. $scope • controller as syntax <div ng-controller="MyCtrl"> <div ng-controller="MyCtrl as

    myCtrl"> • local name for controller object • let's fix the previous example!
  19. $scope app.controller('MyCtrl', function() {
 this.isVisible = true;
 }); • no

    more $scope! • use this – feels more like JavaScript
  20. dependency injection app.controller('MyCtrl', function($timeout) {
 // $timeout is injected!

    • very simple to use • angular can inject based on argument name
  21. dependency injection • there are different solutions: • not to

    minify parts of files • use array notation: ["$timeout",function($timeout){}] • use ng-annotate – does this automatically
  22. communication • often in the application you need to communicate

    between components • the caveat: Angular doesn't provide good means to do that
  23. communication • $brodcast – often abused • $broadcast('myCtrl:sth') – don't!

    • use only for events that are relevant to the whole application • login, closing the app etc…
  24. communication • $rootScope – often abused… • $rootScope.sth = 123

    – don't! • it's as bad as global variables • use for configuration settings or things like page title
  25. communication • $watch – often abused… • $watch(() => {

    MyService; }, …) • the rule of thumb: limit its usage to a minimum • makes testing much harder • might be bad for performance
  26. communication • good solution: use a shared service • straighforward

    to use to just share data between controllers • simply store the data or functions
  27. communication • good solution: observer pattern • well known •

    easy to implement • no performance hit • good for observing changes in the data
  28. Sources: • http://stackoverflow.com/questions/20369514/building-a-web-app-in-angularjs-without-jquery • https://www.airpair.com/angularjs/posts/top-10-mistakes-angularjs-developers-make • http://www.bennadel.com/blog/2752-using-jquery-instead-of-jqlite-in-angularjs.htm • https://blog.angularjs.org/2014/02/an-angularjs-style-guide-and-best.html •

    https://docs.google.com/document/d/1XXMvReO8- Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub • http://toddmotto.com/digging-into-angulars-controller-as-syntax/ • http://stackoverflow.com/questions/12008908/how-can-i-pass-variables-between-controllers • http://stackoverflow.com/questions/13762228/confused-about-service-vs-factory/ 13763886#13763886 • http://giphy.com/search/looney-tunes/5