Angular is a development platform for building mobile and desktop web applications. The document outlines what Angular is, the differences between Angular versions 1, 2 and 4, and key concepts in Angular including components, directives, data binding, modules and services. It provides an overview of Angular's benefits and support as well as a demonstration of Angular functionality.

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/