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.
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Creating Web and Mobile Apps
with Angular 2
George Saadeh
Master...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Many thanks to our sponsors & partners!
GOLD
SILVER
PARTNERS
PLA...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
A JavaScript framework for
building client-side (Single
Page) ap...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
WHY ANGULAR 2?
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Angular 2
Modern
Complete Re-write Lean & Fast
Simplified
More P...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Compatibility
Browser support: Latest versions of Edge, Chrome, ...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
• 1.3 million developers use Angular 1
• 360K developers already...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
• Angular 2.0 RC 1 (May
2nd)
• Angular 2.0 Final (No due
date)
•...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
PREREQUISITES
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Language Choices
ES5 ES6/ES2015 TypeScript Dart
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
No JavaScriptJavaScript
Language Choices
ES5 ES6/ES2015 TypeScri...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
CompiledNot Compiled
Language Choices
ES5 ES6/ES2015 TypeScript ...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
With TypesWithout Types
Language Choices
ES5 ES6/ES2015 TypeScri...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
• Visual Studio Code
• Webstorm and other JetBrains IDEs
• Atom
...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Tooling
Angular CLI
https://cli.angular.io
SERVE, BUILD, DEPLOY,...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
BASIC CONCEPTS
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Modules
• ES2015 has a built-in
module system
• Use export to ma...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Components
• A component consists
of:
–A class with properties
a...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
• The component’s template
can be inline (with Back
Ticks for mu...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
• With dependency
injection built in, you can
inject a service b...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
• Use square brackets for
property bindings
• Use parenthesis fo...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
DEMO
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
GitHub Repository
https://github.com/gsaadeh/itcamp-2016
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Angular 2 Mobile
+ → {native}
{Progressive Web Apps}
+ → {hybrid...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
• Angular Documentation
–Angular.io
• Courses (Pluralsight, Udem...
@ITCAMPRO #ITCAMCommunity Conference for IT Professionals
KEEP IN TOUCH
@george_saadeh
gsaadeh.com
Creating Web and Mobile Apps with Angular 2 - George Saadeh
Upcoming SlideShare
Loading in …5
×

of

Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 1 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 2 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 3 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 4 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 5 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 6 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 7 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 8 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 9 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 10 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 11 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 12 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 13 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 14 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 15 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 16 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 17 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 18 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 19 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 20 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 21 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 22 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 23 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 24 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 25 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 26 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 27 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 28 Creating Web and Mobile Apps with Angular 2 - George Saadeh Slide 29
Upcoming SlideShare
Dev and Test Environments with VSTS and Microsoft Azure - Mihai Tataran
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Creating Web and Mobile Apps with Angular 2 - George Saadeh

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

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
  • leap2k1

    Dec. 14, 2016

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.

Views

Total views

1,547

On Slideshare

0

From embeds

0

Number of embeds

1,118

Actions

Downloads

10

Shares

0

Comments

0

Likes

1

×