How To Structure Large Applications With AngularJS
Upcoming SlideShare
Loading in...5
×
 

How To Structure Large Applications With AngularJS

on

  • 765 views

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.

Statistics

Views

Total Views
765
Views on SlideShare
750
Embed Views
15

Actions

Likes
0
Downloads
12
Comments
0

1 Embed 15

http://www.slideee.com 15

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How To Structure Large Applications With AngularJS How To Structure Large Applications With AngularJS Presentation Transcript

  • HOW TOSTRUCTURE LARGE APPLICATIONS WITH ANGULARJS
  • by STEFAN UNTERHOFER SOFTWARE DEVELOPER AT CATALYSTS
  • PART 1THE PREMISE
  • COMPLETE REWRITE OF A LARGE APPLICATION
  • JAVA BACKEND ANGULARJS FRONTEND
  • MORE THAN 10 SUBMODULES
  • MULTIPLE TEAMS WORKING ON THE SAME CODEBASE
  • MOST DEVS HAVE NO JS EXPERIENCE
  • PART 2PROJECT STRUCTURE
  • SEPARATE DEVELOPMENT STYLES FOR BACKEND AND FRONTEND
  • GRUNT & BOWER FOR FRONTEND MODULES
  • COMPLETELY ENCAPSULATED ANGULAR MODULES
  • BUILD THE WHOLE APPLICATION WITH GRADLE
  • PART 3SOME GOOD PRACTICES
  • DON'T USE SERVER-SIDE FRAMEWORKS TO RENDER PAGES
  • WRITE DOMAIN CLASSES
  • THEY MAKE YOUR CODE MORE UNDERSTANDABLE
  • THEY CAN BE EXTENDED WITH CUSTOM FUNCTIONALITY
  • USE AN API SERVICE
  • // 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; }); });
  • IT'S A SINGLE SOURCE OF TRUTH
  • IT'S A COMMON INTERFACE FOR YOUR API
  • IT'S EASIER TO TEST
  • DON'T REPEAT YOURSELF!
  • 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}); });
  • 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()); });
  • COMPOSITION WITH JS OBJECTS var Pagination = function() { this.page = 1; this.size = 10; } angular.module('example').controller('ExampleCtrl', function($scope) { $scope.pagination = new Pagination(); });
  • AVOID SCOPE INHERITANCE
  • USE DIRECTIVES WHENEVER ITS POSSIBLE
  • UNIFIED LOOK AND FEEL
  • ABSTRACT COMMONLY USED LOGIC
  • ONE DIRECTIVE TO PAGE THEM ALL <mme-paginated api="movieApi" collection="movies"> <!-- insert your table/list here! --> </mme-paginated>
  • github.com/fewagewasd/angular-multimodule-example
  • the end