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.

Creating Web and Mobile Apps with Angular 2 - George Saadeh

1,416 views

Published on

When Google and Microsoft collaborate on a JavaScript framework, you know it’s a big deal. Only a few months away from the official release, Angular2 is shaping up the future of building applications across a variety of platforms. This talk will cover the current state of Angular2 and will help you get on the bandwagon to build both Web and Mobile applications using the framework.

Published in: Technology
  • Be the first to comment

Creating Web and Mobile Apps with Angular 2 - George Saadeh

  1. 1. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals Creating Web and Mobile Apps with Angular 2 George Saadeh Master Consultant / Falafel Software gsaadeh.com / george@falafel.com / @george_saadeh
  2. 2. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals Many thanks to our sponsors & partners! GOLD SILVER PARTNERS PLATINUM POWERED BY
  3. 3. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
  4. 4. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals A JavaScript framework for building client-side (Single Page) applications using HTML, CSS and JavaScript (not limited to HTML anymore). What is Angular?
  5. 5. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals WHY ANGULAR 2?
  6. 6. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals Angular 2 Modern Complete Re-write Lean & Fast Simplified More Productivity
  7. 7. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals Compatibility Browser support: Latest versions of Edge, Chrome, Firefox and Safari as well as legacy browsers back to IE9+ and Android 4.1 Mobile and Desktop support through third-party offerings such as Electron and NativeScript
  8. 8. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals • 1.3 million developers use Angular 1 • 360K developers already use Angular 2 (as of May 2016) • Google, CapitalOne, LucidCharts, Kiva, Weather Channel, and more are already using Angular 2 in production Success Stories Based on numbers from ng-conf 2016
  9. 9. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals • Angular 2.0 RC 1 (May 2nd) • Angular 2.0 Final (No due date) • Router not finalized State of Angular 2
  10. 10. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals PREREQUISITES
  11. 11. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals Language Choices ES5 ES6/ES2015 TypeScript Dart
  12. 12. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals No JavaScriptJavaScript Language Choices ES5 ES6/ES2015 TypeScript Dart Built in module system, classes, arrow functions, local variables etc. Annotations, strong typing Strong typing, classes, OOP
  13. 13. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals CompiledNot Compiled Language Choices ES5 ES6/ES2015 TypeScript Dart
  14. 14. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals With TypesWithout Types Language Choices ES5 ES6/ES2015 TypeScript Dart
  15. 15. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals • Visual Studio Code • Webstorm and other JetBrains IDEs • Atom • Eclipse • Visual Studio • Sublime Text • Emacs • Netbeans • Vim • Others Editor Choices
  16. 16. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals Tooling Angular CLI https://cli.angular.io SERVE, BUILD, DEPLOY, TEST
  17. 17. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals BASIC CONCEPTS
  18. 18. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals Modules • ES2015 has a built-in module system • Use export to make the module available for import • Use import to load an export from another module
  19. 19. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals Components • A component consists of: –A class with properties and methods (data and logic) –A template (the view) –One or more decorators that represent additional metadata that Angular understands –References defined as imports.
  20. 20. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals • The component’s template can be inline (with Back Ticks for multi-line) or linked using templateUrl • Use double-curly braces for interpolation • Built-in directives like *ngFor and *ngIf • Directives help with nesting components Templates, Interpolation and Directives
  21. 21. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals • With dependency injection built in, you can inject a service by adding it to the providers array • A service is a class that contains logic • A service can be used by components or other services Services and Dependency Injection
  22. 22. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals • Use square brackets for property bindings • Use parenthesis for event bindings • Use [()] for two way bindings • Use pipes (|) for handling transformation Data Binding and Pipes
  23. 23. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals DEMO
  24. 24. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals GitHub Repository https://github.com/gsaadeh/itcamp-2016
  25. 25. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals Angular 2 Mobile + → {native} {Progressive Web Apps} + → {hybrid} + → {native} NativeScript Ionic 2 React Native
  26. 26. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals • Angular Documentation –Angular.io • Courses (Pluralsight, Udemy, Egghead.io, Rangle.io etc.) • Books (ng-book2, Practical Angular 2 etc.) • Angular Resources –Angular.io/resources What’s Next?
  27. 27. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
  28. 28. KEEP IN TOUCH @george_saadeh gsaadeh.com

×