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.
AWS Community Day CPH - Three problems of Terraform
Creating Web and Mobile Apps with Angular 2 - George Saadeh
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
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?
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
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
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
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