javascript angular.js angular using typescript scalable code enterprise quality directives services demo project lessons learned advanced manageable code

1. Angular.js:
Lessons Learned
At DAB-Bank

2. David.Amend@it-amend.de

7. DEMO
https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/
https://www.dab-bank.de/Special/Videos/Video-Finanzmanager.xhtml

32. Additional Slides

35. Angular Module Dependencies

36. /app
/applicationContext.js
/modules
/submodule
Module Creation & Referencing
Module Retrieval & Chargement
Inspired By
1.
2.
/submodule-service.js
/submodule-directive.js
/submodule-controller.js Miško Hevery

37. Single Point of Dependency Wireing
/app
applicationContext.js
Registration
angular.module(‘de.dab.pfm.app’, [‘dashboard’]);
angular.module(‘de.dab.pfm.dashboard’, [‘de.dab.pfm.dashboard.header’]);
angular.module(‘de.dab.pfm.dashboard..header’, [‘de.dab.pfm.dashboard.intro’,
‘pieChart]);
angular.module(‘de.dab.pfm.dashboard.intro’, [‘...’]);
angular.module(‘de.dab.shared.pieChart’, [‘...’]);

38. By Module, loose coupled
pieChart
pie-chart-directive.js
angular.module(‘de.dab.shared.pieChart’)
.directive(‘de.dab.shared.pieChartService’, ...);
pie-chart-service.js
angular.module(‘de.dab.shared.pieChart’)
.service(‘de.dab.shared.pieChartService’, ...) pie-chart-
model.js
pie-chart.tpl.html
Getter
full qualifier?

39. Compiling & TypeScript
Why TypeScript?
● Compilation Imposed by Google
● Sweet Home Java/.Net-Developer
● Refactoring Made Easy
● Models Management
● Future-Proof Syntax, Angular 2.0, ...
Choice of TypeScriptifying

40. Personal Finance Management
● https://www.dab-bank.de/Special/Videos/Video-Finanzmanager.xhtml
● https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/
● (Team Setup: Scrum)
● Circumstances
● Competitors
“ Rund zwei Drittel der Teilnehmer zeigen Interesse an
Personal Finance Management und können sich dabei auch
eine langfristige Nutzung vorstellen”
http://www.ibi.de/1317-aktuelle-studie-personal-finance-management.
html