Eliminate Your Fears And Doubts About Angular 4 with practical

In these slides, i am going to share about angular v4 and basic about angular v2

Transcript

2. Fundamentals, Functionality & Syntax
3. Agenda • What is angular 4 ? • What is difference between Angular1,2&4 • Bootstrapping in angular • Life cycle hooks • component, Directive, Decorator ,Template • Change detection • Data Binding(one way, Two way) • Module , Services, Routing • Demo • App configuration with Vscode, NPM • Configuration With .Net core
4. What is Angular ? Angular is a development platform for building mobile and desktop web applications. It's a platform. It's no longer framework.
6. What's New in Angular 4
7. Life cycle hooks
8. Change Detection in Angular
9. Bootstrapping in Angular
10. Cross platform • General Web Applications • Mobile Web (responsive) • Android / iOS: Native with NativeScript & Ionic 2 Native • Windows / Mac / Linux: Desktop using Electron
11. Benefits Fast Powerful Clean Easy • Everything from Angular 1 • Cleaner and re-usable code • Speed (Faster than NG1) (Ahead-of-time compilation) • Easy 3rd Party widget integration • Better mobile support • It’s more about JavaScript - take advantage of ES5 & ES6 • Optional static typing ** • Class-based objected-oriented programming • RxJS (Redux Pattern) & Observables • Reactive Extensions for Angular - Speed improvements
12. Support
13. What Angular 4 Offers  HTTPS Services (Get, Post, etc.)  Usage of Components *  ES2015 / ES6, TypeScript  Dynamic HTML  Fast rendering  Forms & input handling  Event handling  Form Validation  Routing
14. There are 8 key parts to Angular • Templates • Decorators (metadata) • Directives • Data Binding • Components • Services • Modules • Dependency Injection
15. Data Binding DOM Component Interpolation One Way Binding Event Binding Two Way Binding Evaluate an expression between double curly braces {{ expression }} Bind to element, Component or a directive property [property]=“expression” Execute an expression when an event occurs (event-target)=“statement” [(ngModel) ]=“property”
16. Demo
18. Follow me on: • Facebook:: /ER.Bikesh • Twitter:: /Bikeshsrivastav • LinkedIn:: /in/bikeshsrivastava/ • C#Corner:: /members/bikesh-srivastava2 • WhatsApp:: 08802592478 • My Blog:: https: //bikeshsrivastava.blogspot.in/ • Email:: Bikesh1988@gmail.com • gitHub:: https://github.com/Bikeshs • Website: https: //bikeshsrivastava.com/