The 4W's : Who, Where, When & Why to use Angular Why to spend time and learn Angular

1. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8

2. Hi! I’m Lena!
▪ I’m a Designer
▪ Head of Web @SAE Athens
▪ Co-Organizer of Angular Athens
Meetup newly added : )
▪ Organizer of Athens Gamification
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

3. Hi! I’m Lena!
I study Angular in a more Theoretical
Approach.
“Should my students develop Web Apps
in Angular? Is it important to add
Angular in our Study Path?”
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

4. Hi! I’m Lena!
I studied Angular with a more
Theoretical Approach.
Should my students develop websites
in Angular? Is it important to add
Angular lessons in our Study Path?
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
The answer is YES!
BUT… Don’t start with Angular.
Start with Web Fundamentals and end
with Angular in an Awesome Dramatic
Way. : )

5. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
In comparison with other frameworks, Angular is
deeply Opinionated Framework. In Big Complex
Projects with many different Developers working
together, Angular makes the project maintainable
and helps containing the code’s consistency in the
end. (thanks Stefanos : )
#1 Lovers of
the Angular
Power!

6. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
Developers who want to build Web and Mobile
Applications and target a wide variety of
devices. (web, mobile web, native mobile and
native desktop)
#2 Mobile-First
Focused

7. FrontEnders who want to build more complex
Web Applications and want to experiment with
this Framework. Give it a go!
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
#3 FrontEnders
with a spicy
Twist

8. Angular Material is for you! By simply installing
and adding these components to your modules,
you've got a Material-looking App that is based
on Google Design Guidelines.
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
#4 Google
Material Lovers

9. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
With the use of Angular, you can experiment
with different Design Patterns and explore new
ways to develop more complex Applications.
#5 Design Pattern
Explorers

10. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
Good choice for developing Progressive Web
Apps. Work for every user, regardless of
browser choice. (Stay tuned for Giorgos
Kalpakas’ talk : )
#6 “Progressive”
Developers

11. At Home
Invest in your free time at home and build some
Web Apps and Reusable Components that you
will probably use in the future.
Invest your free time and Practice , Practice,
Practice and have fun (as Aris wanted me to
add : )
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

12. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
At Work
When you have a more Complex Project or Web
Application to build that needs Clean
Architecture from the start.
Or when it’s a Project that might Grow and Scale
up to something bigger in the future.

13. First Things
First
First you need to have a good knowledge of
HTML/ CSS , JavaScript & some basic knowledge
of Typescript. Angular is written in TypeScript. It
implements core and optional functionality as a
set of TypeScript libraries that you import into
your apps.
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

14. Wait for it.. Then Get Comfortable with the basics of terminal
commands and npm.
Make some experiments with Node.js and RESTful
API’s basics (GET, POST, PUT)
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

15. Finally! And now you are ready to go and build your first
Web Apps with Angular! Conquer the basics and
Level up : )
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

16. And one
more thing!
Now it’s the right time to add some spices.
Get your hands dirty with this Component-based
Architecture (thanks Profanis for the reminder
of the name : ), and develop some cool but well
structured Web Apps.
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

17. And one
more thing!
Now it’s the right time to add some spices.
Get your hands dirty with this Component
Architecture (thanks Fanis for the name : ),
Design Patterns and more advanced Web App
Architecture Development.
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

18. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
Because of the clean
Architecture of Angular with
Modules, Components,
Templates, Metadata,
Directives and Services.

19. From C# to
Typescript
If you have a background on programming in C#,
Typescript will be easy to learn and start using
Angular.
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

20. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
Angular provides a base for building rich client-
side applications with a specialization on Data
Binding. When your Web App needs to update
content in your UI when a user enters or
modifies it, you can easily do that with Angular.
Data Binding

21. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
Angular supports two-way data binding, meaning
that changes in the DOM, such as user choices,
are also reflected in your program data.
Two-way
Data Binding

22. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
Angular framework has various Libraries that
are grouped as modules in order to build an
application. Angular applications are Modular in
nature and are constructed by assembling
various modules. Modules may have
components, services, functions and or values.
Libraries and
Modules is the
new best thing

23. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
The Angular dependency injection system is
hierarchical. There is a tree of injectors that
parallel an app's component tree. You can
reconfigure the injectors at any level of that
component tree.
Hierarchical
Dependency
Injection

24. Angular builds a separate tree of dependency
injectors that can be altered without
reconfiguring the components.
So, classes don’t have dependencies in
themselves but consume them from the
external source.
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
Hierarchical
Dependency
Injection

25. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
Testing &
Debugging ✓ Unit Testing
✓ Use of End to End Testing
✓ Easy Debugging

26. ✓ Long-Term Support By Google
✓ Big Community Worldwide
Support by
Google
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

27. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
✓ Reusability
✓ Readability
✓ Unit-test Friendly
✓ Maintainability
4 reasons why
all together

28. “Which version am I using?” Angular is
continuously being developed. It’s not always
backwards compatible and you might spend
some time updating content or versions.
Versions
Compatibility
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

29. You can’t always find updated Books, Tutorials
or other useful stuff for the current version.
But you can easily find useful blogs, videos etc
from the Community.
Up to date
Learning
Material
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

30. Right now Angular is changing versions a bit
quickly and you can’t easily find updated Books,
Tutorials or other useful stuff.
Updated
Learning
Material
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u
But don’t be disappointed so quickly!
Angular is still a very good choice to
invest time and start using it and
create Awesome Stuff! : )

31. A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u

32. ▪ https://www.madewithangular.com/
▪ https://www.wappalyzer.com/technologies/angular
▪ https://material.angular.io/
▪ https://material.angular.io/cdk/categories
▪ https://www.oreilly.com/library/view/angular-design-patterns/9781786461728/
▪ https://medium.com/ngx-rocket/the-missing-introduction-to-angular-and-modern-design-patterns-43e8815c2801
▪ https://www.smashingmagazine.com/2018/09/pwa-angular-6/
▪ https://angular.io/guide/architecture
▪ https://www.protractortest.org/#/
A N G U L A R A T H E N S M E E T U P | D E C E M B E R ‘ 1 8
@ l e n a l e k k o u