Angular.js: Lessons Learned

At DAB-Bank

David.Amend@it-amend.de

DEMOhttps://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/

https://www.dab-bank.de/Special/Videos/Video-Finanzmanager.xhtml

Additional Slides

Angular Module Dependencies

/app

/applicationContext.js

/modules

/submodule

/submodule-service.js

/submodule-directive.js

/submodule-controller.js Miško Hevery

Inspired By

1.

2.

Module Creation & Referencing

Module Retrieval & Chargement

Single Point of Dependency Wireing

/app applicationContext.js

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’, [‘...’]);

Registration

By Module, loose coupled

pieChart pie-chart-directive.js

angular.module(‘de.dab.shared.pieChart’).directive(‘de.dab.shared.pieChartService’, ...);

pie-chart-service.jsangular.module(‘de.dab.shared.pieChart’).service(‘de.dab.shared.pieChartService’, ...) pie-chart-model.js

pie-chart.tpl.html

Getter

full qualifier?

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

● 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

Personal Finance Management

“ 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