AngularJS is the incredibly popular framework for building single-page web applications. Version 2.0 is a major leap from the 1.x version designed to address shortcomings in the original 5+ year old framework and to embrace modern browsers and language features. It is being written using TypeScript, a superset of JavaScript that allows you to build code using next generation features and compile it to JavaScript that will run on current browsers. Visual Studio Code is the perfect platform to explore Angular applications because it is free, open source, and cross-platform and supports advanced features such as extensions, code completion and IntelliSense. In this session Jeremy Likness goes hands-on to show you how to set up your environment and build your first application while teaching you about the advantages of the framework and language based on his years of in-the-field experience architecting enterprise Angular applications.

1. ANGULAR 2.0 WITH
TYPESCRIPT
Atlanta JavaScript Meetup
Jeremy Likness – Director App Dev, iVision http://bit.ly/ivisionappdev
@JeremyLikness | http://bit.ly/coderblog | https://github.com/JeremyLikness

2. ABOUT IVISION
• Local company (right across the street)
• Engineering Support
• Cloud Services
• Technology Consulting
• Product Resale
• Application Development: http://bit.ly/ivisionappdev
• Data Management (SQL, NoSQL, REDIS, etc.)
• Business Intelligence
• Collaboration
• Enterprise App Development (Mobile, web, desktop)

3. AGENDA
• Angular 2.0 Kickstart
• Why Angular?
• Angular 1.0 vs. 2.0
• Tools of the Trade
• Hands-on
• Q&A

4. X-PLATFORM TOOLS

5. KICKSTART
npm install -g angular-cli
ng new my-project
cd my-project
ng serve

6. WHY ANGULAR?
• Three D’s of Web Development: http://bit.ly/3dofweb
• Declarative vs. Imperative
• Data-binding
• Dependency Injection
• Components and Templates
• Code Reuse
• Parallel Development
• Testability
• Performance
Source: http://stackoverflow.com/research/developer-survey-2016

7. WHY ANGULAR 2?
• Small footprint (45k – smaller than Angular 1.x)
• Easy to read, understand, and learn declarative interface
• Improved performance (5x rendering in all scenarios over Angular 1.x)
• Great CSS management (CSS per component)
• Module prefixing (easier to move related files in large projects)
• Server-side rendering with Angular universal
• Testing support
• Advanced scaffolding with Angular-CLI
• TypeScript (stay tuned…)

8. WHY TYPESCRIPT?
• “I cannot say I have ever been a Microsoft fan but TypeScript has ‘softened’ me, it is
easily one of the best web technologies to arrive in the past 3 years.” -
https://tedpatrick.com/2013/06/25/7-months-with-typescript/
• “Overall, TypeScript is wonderful to work with. It helps developers catch errors
quickly, adds types and type-checking, and documents your progress so that if
someone else wants to contribute, or you need to return to your work months later,
you can easily pick up where you left off.” - http://www.livetiles.nyc/blog/typescript-a-digital-workplace-
success-story/
• “… we use TypeScript not because we’re part of Microsoft, but because we find
tremendous value by improving our productivity and keeping our quality high which
together allow us to move much faster.” - https://medium.com/@delveeng/why-we-love-typescript-
bec2df88d6c2#.pzp9xp7an

9. WHY TYPESCRIPT?
http://bit.ly/typescriptvid

10. “OUT OF THE BOX”
ng serve
ng test
ng e2e

11. NG WALKTHROUGH
ng g service application
// view models -> components
// service (app service)
// local variables #color myColor
// bindings [innerText] [style.color] [innerHTML]
// events (change)="…"
// CSS
// forms <form> ngControl ngForm (valid, dirty)

12. EXTENDING YOUR NG-APP
ng g component tile
ng g route mark-down
// routerLink
// adding a module
npm i –save showdown

13. EXTENDING YOUR NG-APP
angular-cli-build.js
// path/pattern to deployment assets
'showdown/dist/showdown.js',

14. EXTENDING YOUR NG-APP
system.config.ts
// Map relative paths to URLs.
'showdown': './vendor/showdown/dist/';
// Module configuration (packages)
{ 'showdown' :
{ main: 'showdown.js', // what loads
format: 'global' // <<ambient>>
}
};

15. EXTENDING YOUR NG-APP
Your-Code.ts
import 'showdown';
import { Http, HTTP_PROVIDERS } from '@angular/http';
import 'rxjs/Rx';
// import {x} from 'path/path'
// this is only needed if you do not have typings
declare var showdown: any;

16. QUESTIONS?
Atlanta JavaScript Meetup
Jeremy Likness – Director App Dev, iVision http://bit.ly/ivisionappdev
@JeremyLikness | http://bit.ly/coderblog | https://github.com/JeremyLikness