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.

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. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Many thanks to our sponsors & partners!
GOLD
SILVER
PARTNERS
PLATINUM
POWERED BY

3. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals

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. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
WHY ANGULAR 2?

6. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Angular 2
Modern
Complete Re-write Lean & Fast
Simplified
More Productivity

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. @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. @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. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
PREREQUISITES

11. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Language Choices
ES5 ES6/ES2015 TypeScript Dart

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. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
CompiledNot Compiled
Language Choices
ES5 ES6/ES2015 TypeScript Dart

14. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
With TypesWithout Types
Language Choices
ES5 ES6/ES2015 TypeScript Dart

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. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Tooling
Angular CLI
https://cli.angular.io
SERVE, BUILD, DEPLOY, TEST

17. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
BASIC CONCEPTS

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. @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. @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. @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. @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. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
DEMO

24. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
GitHub Repository
https://github.com/gsaadeh/itcamp-2016

26. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals
Angular 2 Mobile
+ → {native}
{Progressive Web Apps}
+ → {hybrid}
+ → {native}
NativeScript
Ionic 2
React Native

27. @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?

28. @ITCAMPRO #ITCAMCommunity Conference for IT Professionals

29. KEEP IN TOUCH
@george_saadeh
gsaadeh.com