SlideShare a Scribd company logo
Angular JS
The following topics will be covered in our
AngularJS 4 & 5
Online Training:
Copyright @ 2015 Learntek. All Rights Reserved. 2
What is AngularJS?
• AngularJS is a structural framework for dynamic web apps. AngularJS
provides developers options to write client-side application (using
Typescript) in a clean MVC (Model View Controller) way. Angular is used
for Grouping the HTML into reusable components.
• Angular attempts to minimize the impedance mismatch between
document centric HTML and what an application needs by creating new
HTML constructs
Copyright @ 2015 Learntek. All Rights Reserved. 3
Why Angular?
• It is an excellent idea to decouple the client side of an app from the
server side. This allows development work to progress in parallel, and
allows for reuse of both sides.
• DOM control structures for repeating, showing and hiding DOM
fragments.
• It is very helpful indeed if the framework guides developers through the
entire journey of building an app: From designing the UI, through writing
the business logic, to testing.
Copyright @ 2015 Learntek. All Rights Reserved. 4
Starting with Angular 4 Application
• Angular vs Angular 2 vs Angular 4
• Overview of Sample Application
• Course Overview
• Language Use for Development
• Different Editor Overview
• Environment setup for Angular4
• Installing an Angular 4
Application
• Starting an Angular 4 Application
• Hosting Angular4 application
using seed
Copyright @ 2015 Learntek. All Rights Reserved. 5
Components in Angular4
• Introduction
• Use of Component?
• What is Component Class
• Integrating Decorator
• Implement and defining the Metadata
• Importing Third Party Library
• Creating first App Component
• Loading/Bootstrapping App Component
Copyright @ 2015 Learntek. All Rights Reserved. 6
Directives In Angular 4
• Create Directive using Components
• Binding/ Interpolation data in component
• Implementing ngIf Directives
• Implementing ngFor Directives
Copyright @ 2015 Learntek. All Rights Reserved. 7
Templates and Interpolation
• Design Template in Angular4
• Building the Component
Copyright @ 2015 Learntek. All Rights Reserved. 8
Interpolation & Pipes/Custom Pipes
• Binding property and values
• Implement Input with Two-way Binding
• Implement Events with Event Binding
• Custom Pipes and Data transforming
Copyright @ 2015 Learntek. All Rights Reserved. 9
Nested Components
• Component inside Component
• How to use Nested Component
• Use @Input to Pass data in Nested Component
• Use @Output to Pass data from Nested Component
Copyright @ 2015 Learntek. All Rights Reserved. 10
Deep Inside Components
• Interfaces Classes in Angular4
• Adding Styles to component
• Different Lifecycle Hooks
• Adding Custom Pipes
• How to use Module Id
Copyright @ 2015 Learntek. All Rights Reserved. 11
Dependency Injection and Service Angular4
• What is Dependency Injection
• Design a Service
• Build the Service
• Injecting the Service
Copyright @ 2015 Learntek. All Rights Reserved. 12
Adding Retrieving Data Using HTTP
• Building API Link
• Sending data in HTTP Request
• Exception Handling
• Observables from RXJS
• Reactive Extensions
• Subscribing data using Observable
Copyright @ 2015 Learntek. All Rights Reserved. 13
Navigation and Routing Basics
• How Routing Works
• Configuring Routes
• Tying Routes to Actions
• Placing the Views
Copyright @ 2015 Learntek. All Rights Reserved. 14
Angular4 Routing and Navigation
• Sending Parameters to a Route
• Activating a Route with Code
• Authenticate Routes
Copyright @ 2015 Learntek. All Rights Reserved. 15
Form Basic in Angular 4
• Creating new angular-seed Project
• Form and ngForm in Ang4
• Stop Inbuilt Form Validation of Browser
• Add bootstrap to Style Forms and Text Input
• Use Radio Buttons in Form
• Use Select and Options in Form
• Use Checkboxes in Form
Copyright @ 2015 Learntek. All Rights Reserved. 16
Binding Data in Angular4 Forms
• Use ngModel for 2-way binding
• Data Binding in Angular4 Forms
• Use Model Object
• Binding Models
• Data Binding in Select Control
• Data Binding in Checkbox
• Data Binding in Radio Buttons
Copyright @ 2015 Learntek. All Rights Reserved. 17
Validate Form in Angular4
• Validation Classes
• Properties of ngModel Validation
• Display Error Messages in Form
• Add Style Controls in Errors
• Select List validation
• Deep inside the Select Control
• Enable/Disable Submit Button
• Top Form Level Validation
• Attributes of HTML 5
Copyright @ 2015 Learntek. All Rights Reserved. 18
Posting Data using HTTP in Angular4 Forms
• Create Server Using Angular
• Post a Form data in Angular
Server
• Event Handling in Form’s Submit
• Adding Validation to form in
Angular4
• Adding RsJx
• Using Observable and a
Subscriber
• Send data to the Server
• Handling Error
• Dynamic Options for a Select
Control
Copyright @ 2015 Learntek. All Rights Reserved. 19
Third-party Form Controls
• External Date picker in Angular4
• Adding Time picker in Forms
• Styling up ng4-bootstrap
• Add Switch in Angular4
• Multiple Radio Buttons
Copyright @ 2015 Learntek. All Rights Reserved. 20
Modules in Angular4
• Use of Module in Angular4?
• Declarations of Array in Angular4
• Import and Export Various Array
• Angular4 Providers
• Building Shared Module in Angular4
Copyright @ 2015 Learntek. All Rights Reserved. 21
Deployment on AWS
• EC2 Machine
• Intro to GitHub
• Deploy App on AWS
Copyright @ 2015 Learntek. All Rights Reserved. 22
Prerequisite:
• Basic working knowledge of HTML,CSS,JavaScript,Text editor-Visual
Studio code/We storm/Atom and preffered one is Visual Studio .
Copyright @ 2015 Learntek. All Rights Reserved. 23
Copyright @ 2015 Learntek. All Rights Reserved. 24

More Related Content

PPTX
Angular 2 with typescript
PPTX
Angular
PDF
Continuing with the SharePoint Framework
PPTX
ComponentOrientedArchitectureWithAngular2 -WithFonts
PPTX
Introduction to dax7 IDE
PPTX
Connecting the odds in the brave world! Sitecore Commerce Connect
PPTX
SharePoint Saturday Vienna Slides
PPTX
What’s new mvc 4
Angular 2 with typescript
Angular
Continuing with the SharePoint Framework
ComponentOrientedArchitectureWithAngular2 -WithFonts
Introduction to dax7 IDE
Connecting the odds in the brave world! Sitecore Commerce Connect
SharePoint Saturday Vienna Slides
What’s new mvc 4

What's hot (18)

PPTX
Building and Delivering Reports from your Web and Mobile Apps with Telerik Re...
PPTX
SPS Zurich 2018 - Azure Logic Apps: the new workflow engine
PPTX
Telerik Reporting– Quick Start (Part 2)
PPTX
Reporting in Office 365 - ATL SharePoint and Office 365 User Group
PDF
Forge - DevCon 2016: Free your design data
PPTX
SharePoint/Office365/Office Add-ins - Select One
PDF
Sitecore MVC Forms Localization
PPTX
Take Your Reports to Any Screen with Telerik Reporting
PDF
Forge - DevCon 2016: Implementing Rich Applications in the Browser
PDF
The Inverted Funnel of API Documentation
PPTX
Introduction to-angular js
PPTX
Useful SharePoint Tools - SPTech Community Meeting 1
PPTX
Native Touches to your Hybrid Mobile Apps
PPTX
Stock market project
PDF
How to Migrate from SharePoint to Office 365?
PPTX
Build apps that reach millions of Outlook Users
PPTX
Microsoft Flow in Real World Projects: 2 Years later & What's next
PPTX
Building a real-time news feed and toast notifications on SharePoint with SPF...
Building and Delivering Reports from your Web and Mobile Apps with Telerik Re...
SPS Zurich 2018 - Azure Logic Apps: the new workflow engine
Telerik Reporting– Quick Start (Part 2)
Reporting in Office 365 - ATL SharePoint and Office 365 User Group
Forge - DevCon 2016: Free your design data
SharePoint/Office365/Office Add-ins - Select One
Sitecore MVC Forms Localization
Take Your Reports to Any Screen with Telerik Reporting
Forge - DevCon 2016: Implementing Rich Applications in the Browser
The Inverted Funnel of API Documentation
Introduction to-angular js
Useful SharePoint Tools - SPTech Community Meeting 1
Native Touches to your Hybrid Mobile Apps
Stock market project
How to Migrate from SharePoint to Office 365?
Build apps that reach millions of Outlook Users
Microsoft Flow in Real World Projects: 2 Years later & What's next
Building a real-time news feed and toast notifications on SharePoint with SPF...
Ad

Similar to Angular js Online Training (20)

PDF
Angular js
PDF
Angular js
PPSX
Angular 4 fronts
PDF
Angular 7 training_topics
PDF
Angular4 tutorial
ODP
A Glimpse on Angular 4
PPTX
Fly High With Angular - How to build an app using Angular
PDF
Angular 2 overview in 60 minutes
PPTX
Eliminate Your Fears And Doubts About Angular 4 with practical
PPTX
Angular js training
PPTX
Angular js Training in Hyderabad
PDF
Infosys Angular Interview Questions PDF By ScholarHat
PPTX
We are providing Angular Training in Mumbai
ODP
Angular 6 - The Complete Guide
PDF
Java UI Course Content
PDF
Angular 4 Interview Questions PDF By ScholarHat
PDF
Angular Project Report
DOCX
Angular 4 Training | Angular Js training in Hyderabad
PDF
Angular training-course-syllabus
PDF
Mastering angular - Dot Net Tricks
Angular js
Angular js
Angular 4 fronts
Angular 7 training_topics
Angular4 tutorial
A Glimpse on Angular 4
Fly High With Angular - How to build an app using Angular
Angular 2 overview in 60 minutes
Eliminate Your Fears And Doubts About Angular 4 with practical
Angular js training
Angular js Training in Hyderabad
Infosys Angular Interview Questions PDF By ScholarHat
We are providing Angular Training in Mumbai
Angular 6 - The Complete Guide
Java UI Course Content
Angular 4 Interview Questions PDF By ScholarHat
Angular Project Report
Angular 4 Training | Angular Js training in Hyderabad
Angular training-course-syllabus
Mastering angular - Dot Net Tricks
Ad

More from Learntek1 (7)

PPTX
Aws sys ops administrator
PPTX
Big data - Online Training
PPTX
Selenium Online Training
PPTX
React js Online Training
PPTX
Machine learning using spark Online Training
PPTX
Apache Flink Online Training
PPTX
Scala & Spark Online Training
Aws sys ops administrator
Big data - Online Training
Selenium Online Training
React js Online Training
Machine learning using spark Online Training
Apache Flink Online Training
Scala & Spark Online Training

Recently uploaded (20)

PPTX
GDM (1) (1).pptx small presentation for students
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PDF
Sports Quiz easy sports quiz sports quiz
PDF
TR - Agricultural Crops Production NC III.pdf
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PDF
Complications of Minimal Access Surgery at WLH
PPTX
Cell Types and Its function , kingdom of life
PDF
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
PPTX
Cell Structure & Organelles in detailed.
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PDF
O7-L3 Supply Chain Operations - ICLT Program
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PPTX
Pharma ospi slides which help in ospi learning
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PPTX
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
PDF
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx
GDM (1) (1).pptx small presentation for students
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Sports Quiz easy sports quiz sports quiz
TR - Agricultural Crops Production NC III.pdf
Final Presentation General Medicine 03-08-2024.pptx
STATICS OF THE RIGID BODIES Hibbelers.pdf
Microbial diseases, their pathogenesis and prophylaxis
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
Complications of Minimal Access Surgery at WLH
Cell Types and Its function , kingdom of life
Physiotherapy_for_Respiratory_and_Cardiac_Problems WEBBER.pdf
Cell Structure & Organelles in detailed.
human mycosis Human fungal infections are called human mycosis..pptx
O7-L3 Supply Chain Operations - ICLT Program
Abdominal Access Techniques with Prof. Dr. R K Mishra
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
Pharma ospi slides which help in ospi learning
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
ANTIBIOTICS.pptx.pdf………………… xxxxxxxxxxxxx

Angular js Online Training

  • 2. The following topics will be covered in our AngularJS 4 & 5 Online Training: Copyright @ 2015 Learntek. All Rights Reserved. 2
  • 3. What is AngularJS? • AngularJS is a structural framework for dynamic web apps. AngularJS provides developers options to write client-side application (using Typescript) in a clean MVC (Model View Controller) way. Angular is used for Grouping the HTML into reusable components. • Angular attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs Copyright @ 2015 Learntek. All Rights Reserved. 3
  • 4. Why Angular? • It is an excellent idea to decouple the client side of an app from the server side. This allows development work to progress in parallel, and allows for reuse of both sides. • DOM control structures for repeating, showing and hiding DOM fragments. • It is very helpful indeed if the framework guides developers through the entire journey of building an app: From designing the UI, through writing the business logic, to testing. Copyright @ 2015 Learntek. All Rights Reserved. 4
  • 5. Starting with Angular 4 Application • Angular vs Angular 2 vs Angular 4 • Overview of Sample Application • Course Overview • Language Use for Development • Different Editor Overview • Environment setup for Angular4 • Installing an Angular 4 Application • Starting an Angular 4 Application • Hosting Angular4 application using seed Copyright @ 2015 Learntek. All Rights Reserved. 5
  • 6. Components in Angular4 • Introduction • Use of Component? • What is Component Class • Integrating Decorator • Implement and defining the Metadata • Importing Third Party Library • Creating first App Component • Loading/Bootstrapping App Component Copyright @ 2015 Learntek. All Rights Reserved. 6
  • 7. Directives In Angular 4 • Create Directive using Components • Binding/ Interpolation data in component • Implementing ngIf Directives • Implementing ngFor Directives Copyright @ 2015 Learntek. All Rights Reserved. 7
  • 8. Templates and Interpolation • Design Template in Angular4 • Building the Component Copyright @ 2015 Learntek. All Rights Reserved. 8
  • 9. Interpolation & Pipes/Custom Pipes • Binding property and values • Implement Input with Two-way Binding • Implement Events with Event Binding • Custom Pipes and Data transforming Copyright @ 2015 Learntek. All Rights Reserved. 9
  • 10. Nested Components • Component inside Component • How to use Nested Component • Use @Input to Pass data in Nested Component • Use @Output to Pass data from Nested Component Copyright @ 2015 Learntek. All Rights Reserved. 10
  • 11. Deep Inside Components • Interfaces Classes in Angular4 • Adding Styles to component • Different Lifecycle Hooks • Adding Custom Pipes • How to use Module Id Copyright @ 2015 Learntek. All Rights Reserved. 11
  • 12. Dependency Injection and Service Angular4 • What is Dependency Injection • Design a Service • Build the Service • Injecting the Service Copyright @ 2015 Learntek. All Rights Reserved. 12
  • 13. Adding Retrieving Data Using HTTP • Building API Link • Sending data in HTTP Request • Exception Handling • Observables from RXJS • Reactive Extensions • Subscribing data using Observable Copyright @ 2015 Learntek. All Rights Reserved. 13
  • 14. Navigation and Routing Basics • How Routing Works • Configuring Routes • Tying Routes to Actions • Placing the Views Copyright @ 2015 Learntek. All Rights Reserved. 14
  • 15. Angular4 Routing and Navigation • Sending Parameters to a Route • Activating a Route with Code • Authenticate Routes Copyright @ 2015 Learntek. All Rights Reserved. 15
  • 16. Form Basic in Angular 4 • Creating new angular-seed Project • Form and ngForm in Ang4 • Stop Inbuilt Form Validation of Browser • Add bootstrap to Style Forms and Text Input • Use Radio Buttons in Form • Use Select and Options in Form • Use Checkboxes in Form Copyright @ 2015 Learntek. All Rights Reserved. 16
  • 17. Binding Data in Angular4 Forms • Use ngModel for 2-way binding • Data Binding in Angular4 Forms • Use Model Object • Binding Models • Data Binding in Select Control • Data Binding in Checkbox • Data Binding in Radio Buttons Copyright @ 2015 Learntek. All Rights Reserved. 17
  • 18. Validate Form in Angular4 • Validation Classes • Properties of ngModel Validation • Display Error Messages in Form • Add Style Controls in Errors • Select List validation • Deep inside the Select Control • Enable/Disable Submit Button • Top Form Level Validation • Attributes of HTML 5 Copyright @ 2015 Learntek. All Rights Reserved. 18
  • 19. Posting Data using HTTP in Angular4 Forms • Create Server Using Angular • Post a Form data in Angular Server • Event Handling in Form’s Submit • Adding Validation to form in Angular4 • Adding RsJx • Using Observable and a Subscriber • Send data to the Server • Handling Error • Dynamic Options for a Select Control Copyright @ 2015 Learntek. All Rights Reserved. 19
  • 20. Third-party Form Controls • External Date picker in Angular4 • Adding Time picker in Forms • Styling up ng4-bootstrap • Add Switch in Angular4 • Multiple Radio Buttons Copyright @ 2015 Learntek. All Rights Reserved. 20
  • 21. Modules in Angular4 • Use of Module in Angular4? • Declarations of Array in Angular4 • Import and Export Various Array • Angular4 Providers • Building Shared Module in Angular4 Copyright @ 2015 Learntek. All Rights Reserved. 21
  • 22. Deployment on AWS • EC2 Machine • Intro to GitHub • Deploy App on AWS Copyright @ 2015 Learntek. All Rights Reserved. 22
  • 23. Prerequisite: • Basic working knowledge of HTML,CSS,JavaScript,Text editor-Visual Studio code/We storm/Atom and preffered one is Visual Studio . Copyright @ 2015 Learntek. All Rights Reserved. 23
  • 24. Copyright @ 2015 Learntek. All Rights Reserved. 24