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

What's hot

Building and Delivering Reports from your Web and Mobile Apps with Telerik Re...
Building and Delivering Reports from your Web and Mobile Apps with Telerik Re...Building and Delivering Reports from your Web and Mobile Apps with Telerik Re...
Building and Delivering Reports from your Web and Mobile Apps with Telerik Re...
Lohith Goudagere Nagaraj
 
SPS Zurich 2018 - Azure Logic Apps: the new workflow engine
SPS Zurich 2018 - Azure Logic Apps: the new workflow engineSPS Zurich 2018 - Azure Logic Apps: the new workflow engine
SPS Zurich 2018 - Azure Logic Apps: the new workflow engine
David Schneider
 
Telerik Reporting– Quick Start (Part 2)
Telerik Reporting– Quick Start (Part 2)Telerik Reporting– Quick Start (Part 2)
Telerik Reporting– Quick Start (Part 2)
Guo Albert
 
Reporting in Office 365 - ATL SharePoint and Office 365 User Group
Reporting in Office 365 - ATL SharePoint and Office 365 User GroupReporting in Office 365 - ATL SharePoint and Office 365 User Group
Reporting in Office 365 - ATL SharePoint and Office 365 User Group
Ben Stegink
 
Forge - DevCon 2016: Free your design data
Forge - DevCon 2016: Free your design dataForge - DevCon 2016: Free your design data
Forge - DevCon 2016: Free your design data
Autodesk
 
SharePoint/Office365/Office Add-ins - Select One
SharePoint/Office365/Office Add-ins - Select OneSharePoint/Office365/Office Add-ins - Select One
SharePoint/Office365/Office Add-ins - Select One
Ashish Trivedi
 
Sitecore MVC Forms Localization
Sitecore MVC Forms LocalizationSitecore MVC Forms Localization
Sitecore MVC Forms Localization
Tobias Studer
 
Take Your Reports to Any Screen with Telerik Reporting
Take Your Reports to Any Screen with Telerik ReportingTake Your Reports to Any Screen with Telerik Reporting
Take Your Reports to Any Screen with Telerik Reporting
Lohith Goudagere Nagaraj
 
Forge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the BrowserForge - DevCon 2016: Implementing Rich Applications in the Browser
Forge - DevCon 2016: Implementing Rich Applications in the Browser
Autodesk
 
The Inverted Funnel of API Documentation
The Inverted Funnel of API DocumentationThe Inverted Funnel of API Documentation
The Inverted Funnel of API Documentation
Pronovix
 
Introduction to-angular js
Introduction to-angular jsIntroduction to-angular js
Introduction to-angular js
Achintya Kumar
 
Useful SharePoint Tools - SPTech Community Meeting 1
Useful SharePoint Tools - SPTech Community Meeting 1Useful SharePoint Tools - SPTech Community Meeting 1
Useful SharePoint Tools - SPTech Community Meeting 1
Naveed Anjum
 
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
Lohith Goudagere Nagaraj
 
Stock market project
Stock market projectStock market project
Stock market project
GarvitBaleshwar
 
How to Migrate from SharePoint to Office 365?
How to Migrate from SharePoint to Office 365?How to Migrate from SharePoint to Office 365?
How to Migrate from SharePoint to Office 365?
Vyapin Software Systems Private Limited
 
Build apps that reach millions of Outlook Users
Build apps that reach millions of Outlook UsersBuild apps that reach millions of Outlook Users
Build apps that reach millions of Outlook Users
Microsoft Tech Community
 
Microsoft Flow in Real World Projects: 2 Years later & What's next
Microsoft Flow in Real World Projects: 2 Years later & What's nextMicrosoft Flow in Real World Projects: 2 Years later & What's next
Microsoft Flow in Real World Projects: 2 Years later & What's next
BIWUG
 
Building a real-time news feed and toast notifications on SharePoint with SPF...
Building a real-time news feed and toast notifications on SharePoint with SPF...Building a real-time news feed and toast notifications on SharePoint with SPF...
Building a real-time news feed and toast notifications on SharePoint with SPF...
Giuliano De Luca
 

What's hot (18)

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

Similar to Angular js

Mastering angular - Dot Net Tricks
Mastering angular - Dot Net TricksMastering angular - Dot Net Tricks
Mastering angular - Dot Net Tricks
Gaurav Singh
 
What's new in Angular 2?
What's new in Angular 2?What's new in Angular 2?
What's new in Angular 2?
Alfred Jett Grandeza
 
Angular
AngularAngular
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
Edureka!
 
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
iFour Technolab Pvt. Ltd.
 
Angular 6 Form Validation with Material
Angular 6 Form Validation with MaterialAngular 6 Form Validation with Material
Angular 6 Form Validation with Material
Malika Munaweera
 
Srikanth Gattu-SharePoint Developer
Srikanth Gattu-SharePoint DeveloperSrikanth Gattu-SharePoint Developer
Srikanth Gattu-SharePoint Developer
srikanth gattu
 
React-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsxReact-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsx
Kulbir4
 
React js Online Training
React js Online TrainingReact js Online Training
React js Online Training
Learntek1
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with AngularSingle Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with Angular
Sparkhound Inc.
 
Asp.Net MVC 5 in Arabic
Asp.Net MVC 5 in ArabicAsp.Net MVC 5 in Arabic
Asp.Net MVC 5 in Arabic
Haitham Shaddad
 
Angular 4 and TypeScript
Angular 4 and TypeScriptAngular 4 and TypeScript
Angular 4 and TypeScript
Ahmed El-Kady
 
Introduction to django
Introduction to djangoIntroduction to django
Introduction to django
Sreenath Ramamoorthi
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
Jadson Santos
 
AngularJS is awesome
AngularJS is awesomeAngularJS is awesome
AngularJS is awesome
Eusebiu Schipor
 
Spring
SpringSpring
Spring
Janu Jahnavi
 
Practical Application of API-First in microservices development
Practical Application of API-First in microservices developmentPractical Application of API-First in microservices development
Practical Application of API-First in microservices development
Chavdar Baikov
 
Http and observables in Angular .pptx
Http and observables in Angular    .pptxHttp and observables in Angular    .pptx
Http and observables in Angular .pptx
Abhishekprasad158905
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
Premkumar M
 
Angular vs react
Angular vs reactAngular vs react
Angular vs react
Infinijith Technologies
 

Similar to Angular js (20)

Mastering angular - Dot Net Tricks
Mastering angular - Dot Net TricksMastering angular - Dot Net Tricks
Mastering angular - Dot Net Tricks
 
What's new in Angular 2?
What's new in Angular 2?What's new in Angular 2?
What's new in Angular 2?
 
Angular
AngularAngular
Angular
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
 
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 6 Form Validation with Material
Angular 6 Form Validation with MaterialAngular 6 Form Validation with Material
Angular 6 Form Validation with Material
 
Srikanth Gattu-SharePoint Developer
Srikanth Gattu-SharePoint DeveloperSrikanth Gattu-SharePoint Developer
Srikanth Gattu-SharePoint Developer
 
React-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsxReact-Js-Online-Training-9028522.ppsx
React-Js-Online-Training-9028522.ppsx
 
React js Online Training
React js Online TrainingReact js Online Training
React js Online Training
 
Single Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with AngularSingle Page Applications in SharePoint with Angular
Single Page Applications in SharePoint with Angular
 
Asp.Net MVC 5 in Arabic
Asp.Net MVC 5 in ArabicAsp.Net MVC 5 in Arabic
Asp.Net MVC 5 in Arabic
 
Angular 4 and TypeScript
Angular 4 and TypeScriptAngular 4 and TypeScript
Angular 4 and TypeScript
 
Introduction to django
Introduction to djangoIntroduction to django
Introduction to django
 
Introduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete project
 
AngularJS is awesome
AngularJS is awesomeAngularJS is awesome
AngularJS is awesome
 
Spring
SpringSpring
Spring
 
Practical Application of API-First in microservices development
Practical Application of API-First in microservices developmentPractical Application of API-First in microservices development
Practical Application of API-First in microservices development
 
Http and observables in Angular .pptx
Http and observables in Angular    .pptxHttp and observables in Angular    .pptx
Http and observables in Angular .pptx
 
Angular patterns
Angular patternsAngular patterns
Angular patterns
 
Angular vs react
Angular vs reactAngular vs react
Angular vs react
 

More from Janu Jahnavi

Analytics using r programming
Analytics using r programmingAnalytics using r programming
Analytics using r programming
Janu Jahnavi
 
Software testing
Software testingSoftware testing
Software testing
Janu Jahnavi
 
Software testing
Software testingSoftware testing
Software testing
Janu Jahnavi
 
Stack skills
Stack skillsStack skills
Stack skills
Janu Jahnavi
 
Ui devopler
Ui devoplerUi devopler
Ui devopler
Janu Jahnavi
 
Apache flink
Apache flinkApache flink
Apache flink
Janu Jahnavi
 
Apache flink
Apache flinkApache flink
Apache flink
Janu Jahnavi
 
Angular js
Angular jsAngular js
Angular js
Janu Jahnavi
 
Mysql python
Mysql pythonMysql python
Mysql python
Janu Jahnavi
 
Mysql python
Mysql pythonMysql python
Mysql python
Janu Jahnavi
 
Ruby with cucmber
Ruby with cucmberRuby with cucmber
Ruby with cucmber
Janu Jahnavi
 
Apache kafka
Apache kafkaApache kafka
Apache kafka
Janu Jahnavi
 
Apache kafka
Apache kafkaApache kafka
Apache kafka
Janu Jahnavi
 
Google cloud platform
Google cloud platformGoogle cloud platform
Google cloud platform
Janu Jahnavi
 
Google cloud Platform
Google cloud PlatformGoogle cloud Platform
Google cloud Platform
Janu Jahnavi
 
Apache spark with java 8
Apache spark with java 8Apache spark with java 8
Apache spark with java 8
Janu Jahnavi
 
Apache spark with java 8
Apache spark with java 8Apache spark with java 8
Apache spark with java 8
Janu Jahnavi
 
Categorizing and pos tagging with nltk python
Categorizing and pos tagging with nltk pythonCategorizing and pos tagging with nltk python
Categorizing and pos tagging with nltk python
Janu Jahnavi
 
Categorizing and pos tagging with nltk python
Categorizing and pos tagging with nltk pythonCategorizing and pos tagging with nltk python
Categorizing and pos tagging with nltk python
Janu Jahnavi
 
Python multithreading
Python multithreadingPython multithreading
Python multithreading
Janu Jahnavi
 

More from Janu Jahnavi (20)

Analytics using r programming
Analytics using r programmingAnalytics using r programming
Analytics using r programming
 
Software testing
Software testingSoftware testing
Software testing
 
Software testing
Software testingSoftware testing
Software testing
 
Stack skills
Stack skillsStack skills
Stack skills
 
Ui devopler
Ui devoplerUi devopler
Ui devopler
 
Apache flink
Apache flinkApache flink
Apache flink
 
Apache flink
Apache flinkApache flink
Apache flink
 
Angular js
Angular jsAngular js
Angular js
 
Mysql python
Mysql pythonMysql python
Mysql python
 
Mysql python
Mysql pythonMysql python
Mysql python
 
Ruby with cucmber
Ruby with cucmberRuby with cucmber
Ruby with cucmber
 
Apache kafka
Apache kafkaApache kafka
Apache kafka
 
Apache kafka
Apache kafkaApache kafka
Apache kafka
 
Google cloud platform
Google cloud platformGoogle cloud platform
Google cloud platform
 
Google cloud Platform
Google cloud PlatformGoogle cloud Platform
Google cloud Platform
 
Apache spark with java 8
Apache spark with java 8Apache spark with java 8
Apache spark with java 8
 
Apache spark with java 8
Apache spark with java 8Apache spark with java 8
Apache spark with java 8
 
Categorizing and pos tagging with nltk python
Categorizing and pos tagging with nltk pythonCategorizing and pos tagging with nltk python
Categorizing and pos tagging with nltk python
 
Categorizing and pos tagging with nltk python
Categorizing and pos tagging with nltk pythonCategorizing and pos tagging with nltk python
Categorizing and pos tagging with nltk python
 
Python multithreading
Python multithreadingPython multithreading
Python multithreading
 

Recently uploaded

Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Excellence Foundation for South Sudan
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
adhitya5119
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
Celine George
 
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptxChapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Fajar Baskoro
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
Dr. Mulla Adam Ali
 
A Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdfA Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdf
Jean Carlos Nunes Paixão
 
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdfANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
Priyankaranawat4
 
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
National Information Standards Organization (NISO)
 
writing about opinions about Australia the movie
writing about opinions about Australia the moviewriting about opinions about Australia the movie
writing about opinions about Australia the movie
Nicholas Montgomery
 
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPLAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
RAHUL
 
Walmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdfWalmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdf
TechSoup
 
How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience
Wahiba Chair Training & Consulting
 
Digital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental DesignDigital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental Design
amberjdewit93
 
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem studentsRHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
Himanshu Rai
 
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
Nguyen Thanh Tu Collection
 
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
PECB
 
How to deliver Powerpoint Presentations.pptx
How to deliver Powerpoint  Presentations.pptxHow to deliver Powerpoint  Presentations.pptx
How to deliver Powerpoint Presentations.pptx
HajraNaeem15
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
Nguyen Thanh Tu Collection
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
Katrina Pritchard
 

Recently uploaded (20)

Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
 
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptxChapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
 
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
 
A Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdfA Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdf
 
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdfANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
ANATOMY AND BIOMECHANICS OF HIP JOINT.pdf
 
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
Pollock and Snow "DEIA in the Scholarly Landscape, Session One: Setting Expec...
 
writing about opinions about Australia the movie
writing about opinions about Australia the moviewriting about opinions about Australia the movie
writing about opinions about Australia the movie
 
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UPLAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
LAND USE LAND COVER AND NDVI OF MIRZAPUR DISTRICT, UP
 
Walmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdfWalmart Business+ and Spark Good for Nonprofits.pdf
Walmart Business+ and Spark Good for Nonprofits.pdf
 
How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience
 
Digital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental DesignDigital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental Design
 
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem studentsRHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
 
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
BÀI TẬP BỔ TRỢ TIẾNG ANH LỚP 9 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2024-2025 - ...
 
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
ISO/IEC 27001, ISO/IEC 42001, and GDPR: Best Practices for Implementation and...
 
How to deliver Powerpoint Presentations.pptx
How to deliver Powerpoint  Presentations.pptxHow to deliver Powerpoint  Presentations.pptx
How to deliver Powerpoint Presentations.pptx
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
 

Angular js

  • 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