Angular 2 overview in 60 minutes
3 likes750 views
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
![Step 1: Component creation
[Web Components]
Name of the HTML tag for
this Component](https://image.slidesharecdn.com/angular2-60minutes-en-161214234046/85/Angular-2-overview-in-60-minutes-35-320.jpg)
Angular 2 overview in 60 minutes
- 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
- 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
- 19. COMPONENT {…} TEMPLATE <..> DIRECTIVES {..} SERVICES SERVICE A SERVICE B MODULE X MODULE A MODULE B Property Binding Event Binding
- 20. Modules
- 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
- 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
- 47. #2: Property binding The 3 options above have the same output
- 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
- 63. Directive *ngIf
- 65. Directive *ngFor
- 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!
- 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
- 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
- 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
- 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
- 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
- 149. Data-driven
- 150. Data-driven
- 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
- 166. Routes: loadChildren
- 167. Routes: loadChildren
- 169. Loading the module
- 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