How To Structure Large Applications With AngularJS

2,283 views

Published on

Slides from my talk at the 3rd Vienna AngularJS Meetup about using AngularJS in large applications.

Published in: Software, Technology, Education
  • Be the first to comment

  • Be the first to like this

How To Structure Large Applications With AngularJS

  1. 1. HOW TOSTRUCTURE LARGE APPLICATIONS WITH ANGULARJS
  2. 2. by STEFAN UNTERHOFER SOFTWARE DEVELOPER AT CATALYSTS
  3. 3. PART 1THE PREMISE
  4. 4. COMPLETE REWRITE OF A LARGE APPLICATION
  5. 5. JAVA BACKEND ANGULARJS FRONTEND
  6. 6. MORE THAN 10 SUBMODULES
  7. 7. MULTIPLE TEAMS WORKING ON THE SAME CODEBASE
  8. 8. MOST DEVS HAVE NO JS EXPERIENCE
  9. 9. PART 2PROJECT STRUCTURE
  10. 10. SEPARATE DEVELOPMENT STYLES FOR BACKEND AND FRONTEND
  11. 11. GRUNT & BOWER FOR FRONTEND MODULES
  12. 12. COMPLETELY ENCAPSULATED ANGULAR MODULES
  13. 13. BUILD THE WHOLE APPLICATION WITH GRADLE
  14. 14. PART 3SOME GOOD PRACTICES
  15. 15. DON'T USE SERVER-SIDE FRAMEWORKS TO RENDER PAGES
  16. 16. WRITE DOMAIN CLASSES
  17. 17. THEY MAKE YOUR CODE MORE UNDERSTANDABLE
  18. 18. THEY CAN BE EXTENDED WITH CUSTOM FUNCTIONALITY
  19. 19. USE AN API SERVICE
  20. 20. // configure the API endpoint angular.module('example').config(function($apiProvider) { $apiProvider.endpoint('movie', { url: 'movies', model: window.Movie }); }); // use it in the controller angular.module('example').controller('ExampleCtrl',function($scope,$api){ $api.movie.list().then(function(data) { $scope.movies = data; }); });
  21. 21. IT'S A SINGLE SOURCE OF TRUTH
  22. 22. IT'S A COMMON INTERFACE FOR YOUR API
  23. 23. IT'S EASIER TO TEST
  24. 24. DON'T REPEAT YOURSELF!
  25. 25. EXTENDING CONTROLLERS var BasePaginationCtrl = function($scope) { $scope.pagination = { page: 1, size: 10 }; }; angular.module('example') .controller('ExampleCtrl', function($injector, $scope) { // extend the BasePaginationCtrl $injector.invoke(BasePaginationCtrl, this, {$scope: $scope}); });
  26. 26. MIXINS var PaginationMixin = function() { this.page = 1; this.size = 10; } angular.module('example').controller('ExampleCtrl', function($scope) { // add PaginationMixin functionality to $scope angular.extend($scope, new PaginationMixin()); });
  27. 27. COMPOSITION WITH JS OBJECTS var Pagination = function() { this.page = 1; this.size = 10; } angular.module('example').controller('ExampleCtrl', function($scope) { $scope.pagination = new Pagination(); });
  28. 28. AVOID SCOPE INHERITANCE
  29. 29. USE DIRECTIVES WHENEVER ITS POSSIBLE
  30. 30. UNIFIED LOOK AND FEEL
  31. 31. ABSTRACT COMMONLY USED LOGIC
  32. 32. ONE DIRECTIVE TO PAGE THEM ALL <mme-paginated api="movieApi" collection="movies"> <!-- insert your table/list here! --> </mme-paginated>
  33. 33. github.com/fewagewasd/angular-multimodule-example
  34. 34. the end

×