Upload
stefan-unterhofer
View
1.371
Download
0
Embed Size (px)
DESCRIPTION
Slides from my talk at the 3rd Vienna AngularJS Meetup about using AngularJS in large applications.
Citation preview
HOW TOSTRUCTURE LARGE APPLICATIONS WITH ANGULARJS
by STEFAN UNTERHOFERSOFTWARE DEVELOPER AT CATALYSTS
PART 1THE PREMISE
COMPLETE REWRITE OF A LARGE APPLICATION
JAVA BACKENDANGULARJS 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 endpointangular.module('example').config(function($apiProvider) { $apiProvider.endpoint('movie', { url: 'movies', model: window.Movie });});
// use it in the controllerangular.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 CONTROLLERSvar 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});});
MIXINSvar 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 OBJECTSvar 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