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
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
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
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
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
global services • eg. Underscore • you can simply access it in your controllers: app.controller('Ctrl', function(){ _.partition(…); }); • but it's wrong!
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
dependency injection app.controller('MyCtrl', function($timeout) { // $timeout is injected! }); • very simple to use • angular can inject based on argument name
dependency injection • there are different solutions: • not to minify parts of files • use array notation: ["$timeout",function($timeout){}] • use ng-annotate – does this automatically
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…
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
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
communication • good solution: use a shared service • straighforward to use to just share data between controllers • simply store the data or functions