Your SlideShare is downloading. ×
0
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
How To Structure Large Applications With AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How To Structure Large Applications With AngularJS

1,388

Published on

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

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

Published in: Software, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,388
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HOW TOSTRUCTURE LARGE APPLICATIONS WITH ANGULARJS
  • 2. by STEFAN UNTERHOFER SOFTWARE DEVELOPER AT CATALYSTS
  • 3. PART 1THE PREMISE
  • 4. COMPLETE REWRITE OF A LARGE APPLICATION
  • 5. JAVA BACKEND ANGULARJS FRONTEND
  • 6. MORE THAN 10 SUBMODULES
  • 7. MULTIPLE TEAMS WORKING ON THE SAME CODEBASE
  • 8. MOST DEVS HAVE NO JS EXPERIENCE
  • 9. PART 2PROJECT STRUCTURE
  • 10. SEPARATE DEVELOPMENT STYLES FOR BACKEND AND FRONTEND
  • 11. GRUNT & BOWER FOR FRONTEND MODULES
  • 12. COMPLETELY ENCAPSULATED ANGULAR MODULES
  • 13. BUILD THE WHOLE APPLICATION WITH GRADLE
  • 14. PART 3SOME GOOD PRACTICES
  • 15. DON'T USE SERVER-SIDE FRAMEWORKS TO RENDER PAGES
  • 16. WRITE DOMAIN CLASSES
  • 17. THEY MAKE YOUR CODE MORE UNDERSTANDABLE
  • 18. THEY CAN BE EXTENDED WITH CUSTOM FUNCTIONALITY
  • 19. USE AN API SERVICE
  • 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
  • 24. DON'T REPEAT YOURSELF!
  • 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(); });
  • 28. AVOID SCOPE INHERITANCE
  • 29. USE DIRECTIVES WHENEVER ITS POSSIBLE
  • 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>
  • 33. github.com/fewagewasd/angular-multimodule-example
  • 34. the end

×