The document discusses Angular, a framework for building client applications in HTML using JavaScript or TypeScript. It describes key Angular concepts like components, templates, directives, services, and dependency injection. Components control a view and interact with templates through properties and methods. Directives alter HTML elements, and services provide specific reusable functionality through dependency injection. The document also covers Angular improvements in version 2 like improved performance, mobile support and a component-based architecture without $scope.

1. Angular
Angular is dead, long live the Angular

2. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Once upon a time,
2
in a kingdom far far away, there was a soldier…

3. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Years went by…
3
and the war started

4. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
The time has come…
4

5. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular Improvements
5
• Performance Improvements
• Mobile Support
• TypeScript
• No $scope in Angular 2
• Component based Programming and…
• Simplicity

6. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
So, What is Angular?
6
Framework for building client applications
in HTML using JavaScript or TypeScript.
TypeScript?
Typed superset of Javascript that compiles
to plain Javascript

7. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular Architecture
7
Building blocks
• Module
• Component
• Template
• Metadata
• Data Binding
• Service
• Directive
• Dependency Injection

8. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular Architecture
8

9. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular Component Hierarchy
9

10. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular Component Hierarchy
10

11. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular Component Hierarchy
11

12. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular Component Hierarchy
12

13. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular Module or NgModule
13
What is it?
• NgModules help organize an application into cohesive
blocks of functionality.
• A class with a decorator @NgModule decorator

14. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular vs JavaScript Modules
14
• In JavaScript each file is a module and all objects defined
in the file belong to that module
• Angular ships as a collection of JavaScript modules
Each Angular library name begins with the @angular
prefix.

15. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Components
15
• A component controls a patch
of screen called “view”.
• You define a component's
application inside a class.
• The class interacts with the view
through an API of properties
and methods.
• Angular creates, updates, and
destroys components as the
user moves through the
application.

16. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Templates
16
A template is a form of HTML that tells Angular how to render
the component.

17. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Metadata
17
Metadata tells Angular how to process a class.

18. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Data Binding
18
• A mechanism for coordinating parts of a template with
parts of a component.
• Four forms of data binding — to the DOM, from the DOM,
or in both directions.

19. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Data Binding
19
Two-way
• Combines property and event binding in a
single notation
• A data property value flows to the input box
from the component as with property
binding.

20. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Directives
20
• Appear within an element tag as attributes
• Alter the appearance or behavior of an existing element

21. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Services
21
• Anything can be a service
a service is typically a class with a narrow, well-defined
purpose
• It should do something specific and do it well

22. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Dependency Injection
22
• A way to supply a new instance of a class with the
fully-formed dependencies it requires.
• Most dependencies are services.
• Angular uses dependency injection to provide new
components with the services they need.

23. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Dependency Injection
23
Injector
• An injector maintains a container of
service instances that it has
previously created.

24. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular Architecture
24

25. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Putting them all together
25
Webpack

26. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Suddenly the war started…
26

27. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular CLI
27
to the rescue….

28. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Angular CLI
28
to the rescue….

29. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Demo Time
29

30. Angular - Angular is dead, long live the Angular… Stoiximan NT 2017
Directives
30
Syntactic Sugar
• The asterisk is "syntactic sugar" for something a bit more
complicated. Internally, Angular desugars it in two stages.
• First, it translates the *ngIf="..." into a template attribute,
template="ngIf ...", like this.