Angular 2 overview in 60 minutes
•
3 likes•733 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
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Angular 2 overview in 60 minutes
Similar to Angular 2 overview in 60 minutes (20)
Recently uploaded
Recently uploaded (20)
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