Angular 2
Download as PPTX, PDF18 likes2,762 views
The document outlines key points for a session on AngularJS, including its definition, benefits, and structural differences between AngularJS 1 and 2. It highlights the setup of an Angular 2 environment, explains the use of TypeScript, and covers components, templates, and data binding. The session will also address building nested components and using services for data retrieval.
Angular 2
- 1. Framework
- 2. Key Points For Today Session ï What is a Angular Js ? ï What is the main benefits of Angular Js ? ï What is the difference between Angular js 1 and Angular js 2 ? ï Structure of Angular Js ? ï Choose of Language|Editor ?
- 3. Key Points For Today Session ï Introduction of Components. ï Template, Interpolation and Directives. ï Data Binding and Pipes.
- 4. What is Angular Js ï Angular 2 is Javascript framework. ï Building client side application. ï Using HTML,CSS and Javascript.
- 5. Why Angular js? ï Expressive HTML . For eg:- ngIf,ngFor ï Powerful data-binding. ï Support Modular By Design. ï Built in Back-end Integration Service.
- 6. Why Angular Js 2 ï Built for Speed. ï Modern â using new features â classes,object. ï Simplified Api. ï Enhances Productivity.
- 7. Structure of Angular Js 2
- 8. Component
- 9. Selecting a Language ï ES5(EcmaScrpt 5) â Run in the browser. ï ES6(ES-2015) â Lots of new features (classes,let,arrow) ï TypeScript â Superset of javascript, Strong typing, IDE ï Dart.
- 10. What is TypeScipt ï Open source language. ï Superset of JavaScript. ï Transpiles to plain JavaScript. ï Strongly typed. ï .ts Extension. ï Class-Based object orientation.
- 11. TypeScript Editors ï Visual Studio. ï Visual Studio Code. ï Atom. ï Eclipse. ï Others.
- 12. Setting Up Our Environment ï Npm â Node Package Manager,CLU ï Set up the Angular 2 application. ï 1. Create an application folder. ï 2. Create the tsconfig.json file. ï 3. Create the package.json file. ï 4. Create the typings.json file. ï 5. Install the libraries and typings. ï 6. Create the host Web Page(index.html) ï 7. Create the main.ts file(bootstrapper)
- 13. Option to Start ï Manually perform each step. ï www.angular.io Quick Start. ï Download the results of these steps ï www.angular.io ï AngularCli
- 14. Component ï What is a Component? ï Creating the Component Class ï Defining the Metadata with a Decorator. ï Importing What We Need ï Bootstrapping Our App Component
- 15. What is a component
- 16. Component
- 17. Component detail
- 18. Component Class
- 21. Decorator
- 23. Importing What We Need
- 25. Angular 2 Application Startup
- 26. Template, Interpolation and Directives ï Building a Template ï Using a Component as a Directive ï Binding with Interpolation ï Adding Logic with Directives
- 27. Defining a Template in a Component
- 28. Using a Component as a Directive For Add Step 1
- 29. Using a Component as a Directive For Add Step 2.0
- 30. Using a Component as a Directive For Add Step 2.1
- 31. Using a Component as a Directive For Add Step 3
- 32. Binding
- 33. Interpolation
- 34. Directive
- 35. Custom Directive
- 37. ngIf
- 38. ngFor
- 39. for of vs for in
- 40. Data Binding and Pipes. ï Property Binding ï Handling Events with Event Binding ï Handling Input with Two-way Binding. ï Transforming Data with Pipes
- 41. Property binding
- 43. Event Binding
- 44. Event Binding
- 45. Two Way Binding
- 46. Pipes
- 47. Pipe Example
- 49. Next Session Will Cover ï More on Components. ï Building Nested Components. ï Service and Dependence Injection. ï Retrieve Data using Http ï Navigation and Routing.
- 50. QA ï Please let me know if you have any questions ï My email id: nigamgoyal@gmail.com ï Professional email id: nigam@concret.io Made with love in Concretio Apps Pvt Ltd. ï http://www.concret.io