How To Structure Large Applications With AngularJS
- 1. HOW TOSTRUCTURE LARGE APPLICATIONS WITH ANGULARJS
- 2. by STEFAN UNTERHOFER SOFTWARE DEVELOPER AT CATALYSTS
- 4. COMPLETE REWRITE OF A LARGE APPLICATION
- 6. MORE THAN 10 SUBMODULES
- 7. MULTIPLE TEAMS WORKING ON THE SAME CODEBASE
- 8. MOST DEVS HAVE NO JS EXPERIENCE
- 10. SEPARATE DEVELOPMENT STYLES FOR BACKEND AND FRONTEND
- 11. GRUNT & BOWER FOR FRONTEND MODULES
- 13. BUILD THE WHOLE APPLICATION WITH GRADLE
- 14. PART 3SOME GOOD PRACTICES
- 15. DON'T USE SERVER-SIDE FRAMEWORKS TO RENDER PAGES
- 17. THEY MAKE YOUR CODE MORE UNDERSTANDABLE
- 18. THEY CAN BE EXTENDED WITH CUSTOM FUNCTIONALITY
- 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. IT'S A SINGLE SOURCE OF TRUTH
- 22. IT'S A COMMON INTERFACE FOR YOUR API
- 23. IT'S EASIER TO TEST
- 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. 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. COMPOSITION WITH JS OBJECTS var Pagination = function() { this.page = 1; this.size = 10; } angular.module('example').controller('ExampleCtrl', function($scope) { $scope.pagination = new Pagination(); });
- 30. UNIFIED LOOK AND FEEL
- 31. ABSTRACT COMMONLY USED LOGIC
- 32. ONE DIRECTIVE TO PAGE THEM ALL <mme-paginated api="movieApi" collection="movies"> <!-- insert your table/list here! --> </mme-paginated>
- 34. the end