Assorted Pieces from the Angular2 Chocolate Box Istvan Novak Agile coach, architect, SoftwArt Ltd. dotneteer@hotmail.com

About Istvan Agile Architect and Coach, Book Writer Husband, Father of two daughters (17 and 20) Microsoft MVP, long distance runner, rabid fan of scuba diving Author of Unraveling Series (Kindle Books)

Angular 2 Apps in Nutshell Framework to Platform „Delicious Bites” from the menu Taste the style Angular 2 offers for web developers Understand the great mission of the Angular Team A couple of nice features of the Angular 2 platform

Angular 2 Apps In a Nutshell Let’s build a simple app!

Angular 2 – The State of Union Current Milestone: Release Candidate (RC.1) Rendering: 5 times faster than Angular 1 Shipping size is smaller (45K) than Angular 1 Being developed with TypeScript

The Anatomy of an Angular 2 App Pushes data values into HTML controls Defines a Component’s view (HTML) Template Event Binding Property Binding Turns user responses into actions and value updates Service Metadata Tells Angular how to process a class Component Controls a piece of UI (called view), represented by a class Class with well-defined function

Angular Modules and Libraries Library Module Angular Apps Are modular Module → cohesive block of code dedicated to a single purpose (single file) Exports → Artifacts that add value to consumers One application → Many modules Library Modules → Libraries that pack other modules Module (Component) Module (Service) Module (Directive) Module (Utility) TypeScript makes it easy!

Dive Logbook Application Angular Anatomy in Real Code

<router-outlet></router-outlet> Component Structure AppComponent LogbookService <router-outlet></router-outlet> /divelog /add /edit/{id} DiveLogComponent DiveEditComponent DiveFilterPipe CardComponent

From Framework to Platform Angular Evolution

The Goal of Angular 1 A framework that makes things easier to use Reduces the amount of work to create an app

To build a complete platform for developing apps The Mission of Angular 2 To build a complete platform for developing apps

Platform Building Blocks Allows Angular (and other FWXs) to schedule paintings and drawings in a much more efficient way Adding metadata to JavaScript/TypeScript Easier to use than in Angular 1, allows lazy loading Dependency Injection Decorators Zones

Platform Building Blocks Angular CLI Language Services Augury (Chrome Plugin for Angular Debugging) Animation Angular Material Mobile Toolkit Angular Universal (Runs Angular on Server) Router Improved Compiler (Offline compilation) Change Detection (10x faster) Pluggable Rendering (5x faster + pre-rendering) ngUpgrade Dependency Injection Decorators Zones

„Delicious bites” from the menu A few great Angular platform features

Creating new Angular projects Angular CLI Creating new Angular projects

Angular Universal Server Side Rendering

Goals/results What’s next? Where? You’ve been getting to know Angular 2 basics and platform directions Join the bandwagon, and get started with Angular 2: http://angular.io Follow @istvannovak to get news on the progress of my „Unraveling Angular 2” book

It’s Time for Your Questions! Istvan Novak dotneteer@hotmail.com DevCon Site: http://msdevcon.com Angular 2 Resources: http://angular.io Unraveling Books: http://www.amazon.com/Istvan-Novak/e/B002VK5NWC

Thanks for your attention!