The Angular-CLI for Angular 2 and TypeScript
Download as PPTX, PDF0 likes10,862 views
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.
![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)](https://image.slidesharecdn.com/jeremylikness-angular2-atlantajsmeetup-160517120126/85/The-Angular-CLI-for-Angular-2-and-TypeScript-11-320.jpg?cb=1463486580)
The Angular-CLI for Angular 2 and TypeScript
- 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
- 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
- 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