Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ANGULAR 2.0 WITH
TYPESCRIPT
Atlanta JavaScript Meetup
Jeremy Likness – Director App Dev, iVision http://bit.ly/ivisionappd...
ABOUT IVISION
• Local company (right across the street)
• Engineering Support
• Cloud Services
• Technology Consulting
• P...
AGENDA
• Angular 2.0 Kickstart
• Why Angular?
• Angular 1.0 vs. 2.0
• Tools of the Trade
• Hands-on
• Q&A
X-PLATFORM TOOLS
KICKSTART
npm install -g angular-cli
ng new my-project
cd my-project
ng serve
WHY ANGULAR?
• Three D’s of Web Development: http://bit.ly/3dofweb
• Declarative vs. Imperative
• Data-binding
• Dependenc...
WHY ANGULAR 2?
• Small footprint (45k – smaller than Angular 1.x)
• Easy to read, understand, and learn declarative interf...
WHY TYPESCRIPT?
• “I cannot say I have ever been a Microsoft fan but TypeScript has ‘softened’ me, it is
easily one of the...
WHY TYPESCRIPT?
http://bit.ly/typescriptvid
“OUT OF THE BOX”
ng serve
ng test
ng e2e
NG WALKTHROUGH
ng g service application
// view models -> components
// service (app service)
// local variables #color my...
EXTENDING YOUR NG-APP
ng g component tile
ng g route mark-down
// routerLink
// adding a module
npm i –save showdown
EXTENDING YOUR NG-APP
angular-cli-build.js
// path/pattern to deployment assets
'showdown/dist/showdown.js',
EXTENDING YOUR NG-APP
system.config.ts
// Map relative paths to URLs.
'showdown': './vendor/showdown/dist/';
// Module con...
EXTENDING YOUR NG-APP
Your-Code.ts
import 'showdown';
import { Http, HTTP_PROVIDERS } from '@angular/http';
import 'rxjs/R...
QUESTIONS?
Atlanta JavaScript Meetup
Jeremy Likness – Director App Dev, iVision http://bit.ly/ivisionappdev
@JeremyLikness...
Upcoming SlideShare
Loading in …5
×

The Angular-CLI for Angular 2 and TypeScript

9,971 views

Published on

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.

Published in: Sports
  • Be the first to comment

  • Be the first to like this

The Angular-CLI for Angular 2 and TypeScript

  1. 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. 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. 3. AGENDA • Angular 2.0 Kickstart • Why Angular? • Angular 1.0 vs. 2.0 • Tools of the Trade • Hands-on • Q&A
  4. 4. X-PLATFORM TOOLS
  5. 5. KICKSTART npm install -g angular-cli ng new my-project cd my-project ng serve
  6. 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. 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. 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. 9. WHY TYPESCRIPT? http://bit.ly/typescriptvid
  10. 10. “OUT OF THE BOX” ng serve ng test ng e2e
  11. 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. 12. EXTENDING YOUR NG-APP ng g component tile ng g route mark-down // routerLink // adding a module npm i –save showdown
  13. 13. EXTENDING YOUR NG-APP angular-cli-build.js // path/pattern to deployment assets 'showdown/dist/showdown.js',
  14. 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. 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. 16. QUESTIONS? Atlanta JavaScript Meetup Jeremy Likness – Director App Dev, iVision http://bit.ly/ivisionappdev @JeremyLikness | http://bit.ly/coderblog | https://github.com/JeremyLikness

×