javascript & angular .js for the enterprise, lessons learned, typescript scalable code quality
DESCRIPTION
javascript angular.js angular using typescript scalable code enterprise quality directives services demo project lessons learned advanced manageable codeTRANSCRIPT
Angular.js: Lessons Learned
At DAB-Bank
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