Building Angular Applications

with TypeScriptSergey Barskiy

Architect, Tyler Technologies

Why• TypeScript• Productivity / Intellisense• Clean JS code

• Angular • Organized, clean, testable code

Solution Anatomy

• Role of Components• MVC Views• Angular modules• Web Api Services• Entity Framework

Data Access Layer• Repositories• Additional DTO classes as necessary• Segregate query from CUD operation

Additional Server Components• Business Classes vs Entity Framework Classes• Purpose for each one• Minimize Code with AutoMapper• Validation Approach with Data Annotation and

IValidatableObject

• Business Classes in TypeScript• T4 Templates

Additional View Components• MVC Templates• Purpose

• Localization• Consistent Look• Validation• Typos avoidance

Additional Server Components• Web Api• Services at the center of the app• Standalone component without UI dependencies

Angular Components• Controllers• Inheritance and common functionality

• Validation Directives• Form controls• Form submitting

• HTTP Services • Common Components• Please Wait Dialog• HTTP Interceptors and HTTP Service

• Dynamic Menu

Wrapping Up• TypeScript

• Productivity• Intellisense• Fewer typos

• Angular • Well Organized, clean code

• MVC• Productivity• Fewer errors

• Web Api• Standalone service layer based on business objects

Questions?• Sergey@Barskiy.com• http://DotNetSpeak.com