This document provides an overview of Angular 2 including: - Main blocks like components, directives, services, routing etc. - How to set up a development environment with Node.js and TypeScript - Examples of core features like data binding, communication between components, dependency injection, and HTTP requests - Tips for organizing projects, lazy loading modules, ahead of time compilation, and using the Angular CLI

1. Angular 2
Loiane Groner
github.com/loiane
loiane.com
loiane.training
@loiane
overview
in 60 minutes

2. • 10+ XP IT
• Java, JavaScript, Sencha, Angular
Phonegap/Ionic
• Blog: http://loiane.com
• Courses (pt-br): http://loiane.training

3. • My books:

4. !==

8. TYPESCRIPT
TypeScript
ECMAScript 6
ECMAScript 5
ES 2015
November 2009
my-script.ts
transpiler
my-script.js
ES5
Classes and Modules
ECMAScript 7
ES 2016
Decorators and Async
data type, interfaces

9. WHAT WE NEED TO INSTALL
https://nodejs.org

10. TYPESCRIPT
https://www.typescriptlang.org/

11. TYPESCRIPT
$ npm install -g typescript
$ sudo npm install -g typescript
MAC OR LINUX

12. > npm install -g angular-cli
> ng new my-project
> cd my-project
> ng serve

13. COMPONENTS DIRECTIVES
ROUTINGSERVICES
TEMPLATE
DATA BINDINGDEPENDENCY
INJECTION
MODULES
Main Blocks

14. COMPONENT
{…}
TEMPLATE
<..>

15. COMPONENT
{…}
TEMPLATE
<..>
Property
Binding

16. COMPONENT
{…}
TEMPLATE
<..>
Property
Binding
Event
Binding

17. COMPONENT
{…}
TEMPLATE
<..>
DIRECTIVES
{..}
Property
Binding
Event
Binding

18. COMPONENT
{…}
TEMPLATE
<..>
DIRECTIVES
{..}
SERVICES
SERVICE A
SERVICE B
Property
Binding
Event
Binding

19. COMPONENT
{…}
TEMPLATE
<..>
DIRECTIVES
{..}
SERVICES
SERVICE A
SERVICE B MODULE X
MODULE A
MODULE B
Property
Binding
Event
Binding

20. Modules

22. ES 2015 class
imports

24. Declaration of classes we
want to use in the project (Components,
Directives, Pipes)

25. Declaration of classes we
want to use in the project (Components,
Directives, Pipes)
Other module
imports we want to use within this
module

26. Declaration of classes we
want to use in the project (Components,
Directives, Pipes)
Other module
imports we want to use within this
module
Project’s main component

28. We can also create Feature
Modules to help us
organizing the project

29. We can also create Feature
Modules to help us
organizing the project
Service providers

30. Admin
Users
Entitlements
Shared/Common
FormValidations
Pipes
Products
ProductsContainer
ProductsList
ProductDetail
ProductForm
Clients
ClientsContainer
ClientsList
ClientDetails
ClientForm
Sales
SalesContainer
SalesLists
SalesDetails
SalesForm
ProductSalesForm
Reports
DashboardReport
ClientsReport
SearchClientsReport
ProductsReport
SearchProductsReport
SalesReport
SearchSalesReport
ExcelExporter
PDFExporter
Root
AppComponent
NavBar
Menu

31. Components

32. Step 1: Component creation

33. Step 1: Component creation

34. Step 1: Component creation

35. Step 1: Component creation
[Web Components]
Name of the HTML tag for
this Component

36. Step 2: Import and declare the Component in the Module

37. Step 3: Add the HTML tag in another Component

38. Step 3: Add the HTML tag in another Component

39. Templates

40. The Template contains the HTML that will be rendered

41. We can also declare it in a separate file

42. We can also declare it in a separate file

43. Data
Binding

44. #1: Interpolation

45. #1: Interpolation

46. #2: Property binding

47. #2: Property binding
The 3 options above have
the same output

48. #3: Event binding

49. #3: Event binding
Event that we
will listen to

50. #3: Event binding
Event that we
will listen to
Method/
Function that will be
executed

51. #3: Event binding
Event that we
will listen to
Method/
Function that will be
executed

52. How to maintain the template
and components updated?

53. How to maintain the template
and components updated?

54. How to maintain the template
and components updated?

55. Property binding +
event binding
How to maintain the template
and components updated?

56. #4: Model Binding (two-way data-binding)

57. #4: Model Binding (two-way data-binding)

58. #4: Model Binding (two-way data-binding)
Two-way
data binding with
NgModel

59. Directives

60. TEXT
DIRECTIVE TYPES
STRUCTURAL DIRECTIVES
Interact with the view and
modify the DOM structure and/
or HTML code
*ngFor
*ngIf

61. TEXT
DIRECTIVE TYPES
STRUCTURAL DIRECTIVES
Interact with the view and
modify the DOM structure and/
or HTML code
*ngFor
*ngIf
ATRIBUTE DIRECTIVES
Interact with the element where
the directive was applied
ng-class
ng-style

62. Conditional If: JavaScript

63. Directive *ngIf

64. for loop: JavaScript

65. Directive *ngFor

66. Class property binding

67. Directive ngClass

68. And how components can communicate
between themselves?
Parent component <-> child component?

69. @Input(): Parent Component -> Child Component

70. @Input(): Parent Component -> Child Component

71. @Input(): Parent Component -> Child Component
We use the decorator @Input in the atributes we
want to expose to the parent Component

72. @Output(): Child Component -> Parent Component

73. @Output(): Child Component -> Parent Component
We emit a
value/event to the parent
component

74. With @Output we can also listen to custom events

75. With @Output we can also listen to custom events
We can listen
to the custom event
(@Output)

76. With @Output we can also listen to custom events
We can listen
to the custom event
(@Output)
We can also receive
the custom value

77. Services

78. Step 1: Simply create a class with methods!

79. Step 1: Simply create a class with methods!

80. Dependency
Injection

81. Step 2: Decorate!

82. Step 2: Decorate!
Don’t forget to
import the decorator

83. Step 3: Import and declare the service
provider in the module (or component)

84. Step 3: Import and declare the service
provider in the module (or component)
Don’t forget to
import the service

85. Step 4: Import and inject the service in the Component’s class
constructor

86. Step 4: Import and inject the service in the Component’s class
constructor
Don’t forget to
import the service

88. Step 1: Import and inject the Http class

89. Step 1: Import and inject the Http class
Import

90. Don’t forget to import the HttpModule in the Module as well

91. Don’t forget to import the HttpModule in the Module as well
We need
to import the Http
Module

92. Then, we can use the get, post, put and
delete methods!

93. Restful CRUD

95. Manipulating data from server!

96. Manipulating data from server!
Async data streams:
.do
.map
.filter
.when
.add

97. Manipulating data from server!
Async data streams:
.do
.map
.filter
.when
.add
Reactive programming

98. In the Component we can subscribe to changes - Observables

99. Routing

100. Step 1: app.routing.ts

101. Step 1: app.routing.ts

102. Step 1: app.routing.ts

103. Step 1: app.routing.ts

104. Step 2: Import the routes in the app.module
We need to import
the routes

105. Step 3: Add the tag router-outlet in your main component

106. Step 4: Add the router links in the projects

107. Organizing the
routes

108. Users Modules: create file users.routing.ts
We cannot forget to import it in the module as well

109. We can also pass parameters to the route

110. And to get the parameters in the component…

111. And to get the parameters in the component…

112. We cannot forget to inject the ActivatedRoute in the component
constructor

113. Child Routes

114. Step 1: Declare parent route and its children

115. Step 1: Declare parent route and its children

116. Step 2: we also need a router-outlet in the parent route
component

117. Step 2: we also need a router-outlet in the parent route
component

118. Guards:
canActivate
canDeactivate

119. Step 1: Add the route guard

120. Step 1: Add the route guard

121. Step 2: create a service that contains the required programming
logic (is logged in, has entitlements)

122. Step 2: create a service that contains the required programming
logic (is logged in, has entitlements)

123. Step 2: create a service that contains the required programming
logic (is logged in, has entitlements)

124. Step 2: create a service that contains the required programming
logic (is logged in, has entitlements)

125. Step 3: Provide the service so we can use it as a route guard

126. Step 3: Provide the service so we can use it as a route guard

127. and there is more!

128. Pipes

129. Decorator @Pipe

130. Using a pipe: | pipeName

131. Forms

133. 2 TYPES OF FORMS
•Data-driven (reactive form)
•Validations in the Component
•Template driven
•Validation in the form template

134. Template-driven

135. Template-driven

136. Template-driven

137. Template-driven
Very important!

138. Template-driven

139. Template-driven

140. Template-driven

141. Template-driven

142. Template-driven

143. Template-driven

144. Template-driven

145. Template-driven
Super hiper mega
importante!
Local variable to
reference in the validation

146. Data-driven

147. Data-driven

148. Data-driven
Very important #1

149. Data-driven

150. Data-driven

151. Data-driven
Very important #2

152. Data-driven

153. Data-driven

154. Data-driven

155. Data-driven

156. > npm install -g angular-cli
> ng new meu-projeto
> cd meu-projeto
> ng serve

157. ANGULAR CLI: GENERATING COMPONENTS
> cd myProject
> ng generate component hello-world
> ng g component hello-world

158. ANGULAR CLI: GENERATING COMPONENTS

159. Naming conventions
hello-world.component.ts
Words separates by “-“
dot
“component" -> indicates that is a Component
dot
ts -> TypeScript extension

160. Naming conventions
export class HelloWorldComponent {}
hello-world.component.ts

161. Naming conventions
export class HelloWorldComponent {}
hello-world.component.ts
The same applies to a service.ts,
pipe.ts, directive.ts, etc

164. Tips for
bug
projects

165. Lazy loading +
modules

166. Routes:
loadChildren

167. Routes:
loadChildren

168. Loading the applications

169. Loading the module

170. Ahead of Time
Compilation

171. PROJECT DEVELOPMENT WITH ANGULAR 2 + TYPESCRIPT
PROJECT COMPILATION WITH TSC (TS COMPILER)
BUNDLING
MINIFICATION
DEPLOY
“Normal" compilation process

172. DOWNLOAD OF JAVASCRIPT FILES
ANGULAR 2 BOOTSTRAP
REAL TIME COMPILATION
APPLICATION IS RENDERED

173. PROJECT DEVELOPMENT WITH ANGULAR 2 + TYPESCRIPT
PROJECT COMPILATION WITH TSC (TS COMPILER)
BUNDLING
MINIFICATION
DEPLOY
COMPILATION OF CODE AND TEMPLATES TO TS
COMPILATION FROM TS TO JS
Aot compilation process

174. DOWNLOAD OF JAVASCRIPT FILES
ANGULAR 2 BOOTSTRAP
APPLICATION IS RENDERED

175. ANGULAR CLI: NG SERVE OR BUILD —AOT
> cd myProject
> ng serve —-aot
> ng build —-aot

176. •https://github.com/loiane/angular2-pokedex
•https://github.com/loiane/angular2-crud-rest
•https://github.com/loiane/angular2-crud-auth-routing

178. http://loiane.com
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://loiane.training