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

Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
Diana Rendina
 
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
 
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptxChapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Denish Jangid
 
MARY JANE WILSON, A “BOA MÃE” .
MARY JANE WILSON, A “BOA MÃE”           .MARY JANE WILSON, A “BOA MÃE”           .
MARY JANE WILSON, A “BOA MÃE” .
Colégio Santa Teresinha
 
How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17
Celine George
 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
Jyoti Chand
 
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
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
WaniBasim
 
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
 
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
 
The Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collectionThe Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collection
Israel Genealogy Research Association
 
How to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP ModuleHow to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP Module
Celine George
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
mulvey2
 
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptxNEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
iammrhaywood
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
eBook.com.bd (প্রয়োজনীয় বাংলা বই)
 
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama UniversityNatural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Akanksha trivedi rama nursing college kanpur.
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
Priyankaranawat4
 
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptxPrésentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
siemaillard
 
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
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
adhitya5119
 

Recently uploaded (20)

Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
Reimagining Your Library Space: How to Increase the Vibes in Your Library No ...
 
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...
 
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptxChapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptx
 
MARY JANE WILSON, A “BOA MÃE” .
MARY JANE WILSON, A “BOA MÃE”           .MARY JANE WILSON, A “BOA MÃE”           .
MARY JANE WILSON, A “BOA MÃE” .
 
How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17
 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
 
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
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
 
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
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
 
The Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collectionThe Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collection
 
How to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP ModuleHow to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP Module
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
 
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptxNEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
 
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama UniversityNatural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
 
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptxPrésentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
 
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
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
 

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