SlideShare a Scribd company logo
1 of 19
Fundamentals, Functionality & Syntax
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
What is Angular ?
Angular is a development platform for building mobile and
desktop web applications.
It's a platform.
It's no longer framework.
What's New in Angular 4
Life cycle hooks
Change Detection in Angular
Bootstrapping in Angular
Cross platform
• General Web Applications
• Mobile Web (responsive)
• Android / iOS:
Native with NativeScript & Ionic 2 Native
• Windows / Mac / Linux:
Desktop using Electron
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
Support
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
There are 8 key parts to Angular
• Templates
• Decorators (metadata)
• Directives
• Data Binding
• Components • Services
• Modules
• Dependency Injection
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”
Demo
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/
Eliminate Your Fears And Doubts About Angular 4 with practical

More Related Content

What's hot

UWP apps development - Part 2
UWP apps development - Part 2UWP apps development - Part 2
UWP apps development - Part 2Jiri Danihelka
 
AWS Summit New York Recap 2016
AWS Summit New York Recap 2016AWS Summit New York Recap 2016
AWS Summit New York Recap 2016CloudHesive
 
Les nouveautés ASP.NET 5 avec Visual Studio 2015
Les nouveautés ASP.NET 5 avec Visual Studio 2015Les nouveautés ASP.NET 5 avec Visual Studio 2015
Les nouveautés ASP.NET 5 avec Visual Studio 2015MSDEVMTL
 
Serverless architecture
Serverless architectureServerless architecture
Serverless architecturevipin kumar
 
How experiments drive product growth at Viki
How experiments drive product growth at VikiHow experiments drive product growth at Viki
How experiments drive product growth at Vikiishanagrawal90
 
New Enterprisre Capabilities in Telerik Platform
New Enterprisre Capabilities in Telerik PlatformNew Enterprisre Capabilities in Telerik Platform
New Enterprisre Capabilities in Telerik PlatformLohith Goudagere Nagaraj
 
Angular4 kickstart
Angular4 kickstartAngular4 kickstart
Angular4 kickstartFoyzul Karim
 
RubyConf China 2015 - Rails off assets pipeline
RubyConf China 2015 - Rails off assets pipelineRubyConf China 2015 - Rails off assets pipeline
RubyConf China 2015 - Rails off assets pipelineFlorian Dutey
 
Front End Applications Using One Stop JavaScript Library from Telerik
Front End Applications Using One Stop JavaScript Library from TelerikFront End Applications Using One Stop JavaScript Library from Telerik
Front End Applications Using One Stop JavaScript Library from TelerikLohith Goudagere Nagaraj
 
Kibana globalization at the RTP meetup
Kibana globalization at the RTP meetupKibana globalization at the RTP meetup
Kibana globalization at the RTP meetupShikha Srivastava
 
Asp.NETZERO - A Workshop Presentation by Citytech Software
Asp.NETZERO - A Workshop Presentation by Citytech SoftwareAsp.NETZERO - A Workshop Presentation by Citytech Software
Asp.NETZERO - A Workshop Presentation by Citytech SoftwareRitwik Das
 
Build Hybrid Mobile Applications for Nokia Lumia Devices
Build Hybrid Mobile Applications for Nokia Lumia DevicesBuild Hybrid Mobile Applications for Nokia Lumia Devices
Build Hybrid Mobile Applications for Nokia Lumia DevicesLohith Goudagere Nagaraj
 
Threading Made Easy! A Busy Developer’s Guide to Kotlin Coroutines
Threading Made Easy! A Busy Developer’s Guide to Kotlin CoroutinesThreading Made Easy! A Busy Developer’s Guide to Kotlin Coroutines
Threading Made Easy! A Busy Developer’s Guide to Kotlin CoroutinesLauren Yew
 
Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent Biret
 
Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent Biret
 

What's hot (20)

CloudKit
CloudKitCloudKit
CloudKit
 
Async streams
Async streamsAsync streams
Async streams
 
UWP apps development - Part 2
UWP apps development - Part 2UWP apps development - Part 2
UWP apps development - Part 2
 
Ionic vancouver 201612
Ionic vancouver 201612Ionic vancouver 201612
Ionic vancouver 201612
 
AWS Summit New York Recap 2016
AWS Summit New York Recap 2016AWS Summit New York Recap 2016
AWS Summit New York Recap 2016
 
Les nouveautés ASP.NET 5 avec Visual Studio 2015
Les nouveautés ASP.NET 5 avec Visual Studio 2015Les nouveautés ASP.NET 5 avec Visual Studio 2015
Les nouveautés ASP.NET 5 avec Visual Studio 2015
 
Serverless architecture
Serverless architectureServerless architecture
Serverless architecture
 
How experiments drive product growth at Viki
How experiments drive product growth at VikiHow experiments drive product growth at Viki
How experiments drive product growth at Viki
 
Getting Started with ASP.NET vNext
Getting Started with ASP.NET vNextGetting Started with ASP.NET vNext
Getting Started with ASP.NET vNext
 
New Enterprisre Capabilities in Telerik Platform
New Enterprisre Capabilities in Telerik PlatformNew Enterprisre Capabilities in Telerik Platform
New Enterprisre Capabilities in Telerik Platform
 
Angular4 kickstart
Angular4 kickstartAngular4 kickstart
Angular4 kickstart
 
RubyConf China 2015 - Rails off assets pipeline
RubyConf China 2015 - Rails off assets pipelineRubyConf China 2015 - Rails off assets pipeline
RubyConf China 2015 - Rails off assets pipeline
 
Front End Applications Using One Stop JavaScript Library from Telerik
Front End Applications Using One Stop JavaScript Library from TelerikFront End Applications Using One Stop JavaScript Library from Telerik
Front End Applications Using One Stop JavaScript Library from Telerik
 
Kibana globalization at the RTP meetup
Kibana globalization at the RTP meetupKibana globalization at the RTP meetup
Kibana globalization at the RTP meetup
 
Asp.NETZERO - A Workshop Presentation by Citytech Software
Asp.NETZERO - A Workshop Presentation by Citytech SoftwareAsp.NETZERO - A Workshop Presentation by Citytech Software
Asp.NETZERO - A Workshop Presentation by Citytech Software
 
Build Hybrid Mobile Applications for Nokia Lumia Devices
Build Hybrid Mobile Applications for Nokia Lumia DevicesBuild Hybrid Mobile Applications for Nokia Lumia Devices
Build Hybrid Mobile Applications for Nokia Lumia Devices
 
Threading Made Easy! A Busy Developer’s Guide to Kotlin Coroutines
Threading Made Easy! A Busy Developer’s Guide to Kotlin CoroutinesThreading Made Easy! A Busy Developer’s Guide to Kotlin Coroutines
Threading Made Easy! A Busy Developer’s Guide to Kotlin Coroutines
 
Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)
 
Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)
 
Native Touches to your Hybrid Mobile Apps
Native Touches to your Hybrid Mobile AppsNative Touches to your Hybrid Mobile Apps
Native Touches to your Hybrid Mobile Apps
 

Similar to Eliminate Your Fears And Doubts About Angular 4 with practical

Evolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdfEvolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdfiFour Technolab Pvt. Ltd.
 
Mastering angular - Dot Net Tricks
Mastering angular - Dot Net TricksMastering angular - Dot Net Tricks
Mastering angular - Dot Net TricksGaurav Singh
 
Angular meetup 2 2019-08-29
Angular meetup 2   2019-08-29Angular meetup 2   2019-08-29
Angular meetup 2 2019-08-29Nitin Bhojwani
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Bibby Chung
 
Angular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and WorkshopAngular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and WorkshopNitin Bhojwani
 
Where and Why Use Angular for Web Development?
Where and Why Use Angular for Web Development?Where and Why Use Angular for Web Development?
Where and Why Use Angular for Web Development?John Metthew
 
Microfrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedMicrofrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedVinci Rufus
 
OSGi on Google Android using Apache Felix
OSGi on Google Android using Apache FelixOSGi on Google Android using Apache Felix
OSGi on Google Android using Apache FelixMarcel Offermans
 
Swagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlierSwagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlierMiroslav Resetar
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angularBasarat Syed
 
Comparison of-angular-8 vs react-js
Comparison of-angular-8 vs react-jsComparison of-angular-8 vs react-js
Comparison of-angular-8 vs react-jseasyjobworld
 
Building front-end apps that Scale - FOSDEM 2014
Building front-end apps that Scale - FOSDEM 2014Building front-end apps that Scale - FOSDEM 2014
Building front-end apps that Scale - FOSDEM 2014Phil Leggetter
 

Similar to Eliminate Your Fears And Doubts About Angular 4 with practical (20)

Evolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdfEvolution and History of Angular as Web Development Platform.pdf
Evolution and History of Angular as Web Development Platform.pdf
 
Angular 2
Angular 2Angular 2
Angular 2
 
Angular vs react
Angular vs reactAngular vs react
Angular vs react
 
Mastering angular - Dot Net Tricks
Mastering angular - Dot Net TricksMastering angular - Dot Net Tricks
Mastering angular - Dot Net Tricks
 
Why choose Angular 6?
Why choose Angular 6?Why choose Angular 6?
Why choose Angular 6?
 
Angular meetup 2 2019-08-29
Angular meetup 2   2019-08-29Angular meetup 2   2019-08-29
Angular meetup 2 2019-08-29
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Angular2.0@Shanghai0319
Angular2.0@Shanghai0319
 
Angular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and WorkshopAngular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and Workshop
 
Where and Why Use Angular for Web Development?
Where and Why Use Angular for Web Development?Where and Why Use Angular for Web Development?
Where and Why Use Angular for Web Development?
 
Ionic vancouver 201604
Ionic vancouver 201604Ionic vancouver 201604
Ionic vancouver 201604
 
Ionic & Angular
Ionic & AngularIonic & Angular
Ionic & Angular
 
Angular 14.pptx
Angular 14.pptxAngular 14.pptx
Angular 14.pptx
 
New World of Angular (v2+)
New World of Angular (v2+)New World of Angular (v2+)
New World of Angular (v2+)
 
Microfrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased basedMicrofrontends Monoreops & Trunkbased based
Microfrontends Monoreops & Trunkbased based
 
OSGi on Google Android using Apache Felix
OSGi on Google Android using Apache FelixOSGi on Google Android using Apache Felix
OSGi on Google Android using Apache Felix
 
5 Key Benefits of Migration
5 Key Benefits of Migration5 Key Benefits of Migration
5 Key Benefits of Migration
 
Swagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlierSwagger - Making REST APIs friendlier
Swagger - Making REST APIs friendlier
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
 
Comparison of-angular-8 vs react-js
Comparison of-angular-8 vs react-jsComparison of-angular-8 vs react-js
Comparison of-angular-8 vs react-js
 
Building front-end apps that Scale - FOSDEM 2014
Building front-end apps that Scale - FOSDEM 2014Building front-end apps that Scale - FOSDEM 2014
Building front-end apps that Scale - FOSDEM 2014
 

Recently uploaded

JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard37
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهMohamed Sweelam
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiRaviKumarDaparthi
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistandanishmna97
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMKumar Satyam
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfalexjohnson7307
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...SOFTTECHHUB
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAnitaRaj43
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfdanishmna97
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...ScyllaDB
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfAnubhavMangla3
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsLeah Henrickson
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...panagenda
 

Recently uploaded (20)

JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهله
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 

Eliminate Your Fears And Doubts About Angular 4 with practical

  • 1.
  • 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.
  • 5.
  • 6. What's New in Angular 4
  • 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
  • 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
  • 17.
  • 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/