2. Assorted Pieces from the Angular2 Chocolate Box
Istvan Novak
Agile coach, architect, SoftwArt Ltd.

3. 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)

4. 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

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

6. 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

7. 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

8. 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!

9. Dive Logbook Application
Angular Anatomy in Real Code

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

11. From Framework to Platform
Angular Evolution

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

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

14. 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

15. 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

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

17. Creating new Angular projects
Angular CLI
Creating new Angular projects

18. Angular Universal
Server Side Rendering

19. 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:
to get news on the progress of my „Unraveling Angular 2” book

20. It’s Time for Your Questions!
Istvan Novak
DevCon Site:
Angular 2 Resources:
Unraveling Books:

21. Thanks for your attention!