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