SlideShare a Scribd company logo
1 of 13
Full-Stack
Author:
TU Tran
Skype: tranthanhtu83
Level 1
Part 2 - Angular
- Implement permission management feature
- Create and register route to appropriated component
- Display data and display on UI
- Getting data from remote source (Http + REST)
- Multiple languages
- Error handling
Scope
TU Tran(skype: tranthanhtu83)
- Sample code: https://github.com/techcoaching/angular_for_enterprise
- Angular docs: https://angular.io/
- Visual code: https://code.visualstudio.com
- Slides: http://www.slideshare.net/TuTran10/fullstack-part-2-angular
- Node Js: https://nodejs.org/en/
Resource
TU Tran(skype: tranthanhtu83)
 Overview
 Configure and run sample code
 Route & component
 Data binding
 Service & REST (Http)
Agenda
TU Tran(skype: tranthanhtu83)
Overview
TU Tran(skype: tranthanhtu83)
Configure and Run
TU Tran(skype: tranthanhtu83)
Route & Component
TU Tran(skype: tranthanhtu83)
Route & Component
TU Tran(skype: tranthanhtu83)
Route & Component
TU Tran(skype: tranthanhtu83)
Binding
TU Tran(skype: tranthanhtu83)
Component
(.ts)
Component UI
(.html)
Service REST ApiHttp
Promise
Binding
Service
TU Tran(skype: tranthanhtu83)
TU Tran(skype: tranthanhtu83)
Q&A
TU Tran(skype: tranthanhtu83)
THANK YOUFullstack Part 2 - Angular

More Related Content

Viewers also liked

Do Logic Apps support error handling?
Do Logic Apps support error handling?Do Logic Apps support error handling?
Do Logic Apps support error handling?BizTalk360
 
Maalouf - Sample 2 world affairs
Maalouf - Sample 2 world affairsMaalouf - Sample 2 world affairs
Maalouf - Sample 2 world affairsAnthony Maalouf
 
Silver bend week 5 philippine
Silver bend week 5 philippineSilver bend week 5 philippine
Silver bend week 5 philippineSimpony
 

Viewers also liked (7)

Do Logic Apps support error handling?
Do Logic Apps support error handling?Do Logic Apps support error handling?
Do Logic Apps support error handling?
 
Soorah Hujrat Part 2
Soorah Hujrat Part 2Soorah Hujrat Part 2
Soorah Hujrat Part 2
 
Maalouf - Sample 2 world affairs
Maalouf - Sample 2 world affairsMaalouf - Sample 2 world affairs
Maalouf - Sample 2 world affairs
 
Bruxismo
BruxismoBruxismo
Bruxismo
 
Silver bend week 5 philippine
Silver bend week 5 philippineSilver bend week 5 philippine
Silver bend week 5 philippine
 
CASO DE TRATADOS
CASO DE TRATADOSCASO DE TRATADOS
CASO DE TRATADOS
 
anthology
anthologyanthology
anthology
 

Similar to Fullstack Part 2 - Angular

Angular2 getstart
Angular2 getstartAngular2 getstart
Angular2 getstartTu Tran
 
Fluentd - road to v1 -
Fluentd - road to v1 -Fluentd - road to v1 -
Fluentd - road to v1 -N Masahiro
 
WebRTC: A front-end perspective
WebRTC: A front-end perspectiveWebRTC: A front-end perspective
WebRTC: A front-end perspectiveshwetank
 
What's New with Windows Phone - FoxCon Talk
What's New with Windows Phone - FoxCon TalkWhat's New with Windows Phone - FoxCon Talk
What's New with Windows Phone - FoxCon TalkSam Basu
 
Fluentd - RubyKansai 65
Fluentd - RubyKansai 65Fluentd - RubyKansai 65
Fluentd - RubyKansai 65N Masahiro
 
DotDotPwn Fuzzer - Black Hat 2011 (Arsenal)
DotDotPwn Fuzzer - Black Hat 2011 (Arsenal)DotDotPwn Fuzzer - Black Hat 2011 (Arsenal)
DotDotPwn Fuzzer - Black Hat 2011 (Arsenal)Alejandro Hernández
 
Webapps development on ubuntu
Webapps development on ubuntuWebapps development on ubuntu
Webapps development on ubuntuXiaoguo Liu
 
OGCE Overview for SciDAC 2009
OGCE Overview for SciDAC 2009OGCE Overview for SciDAC 2009
OGCE Overview for SciDAC 2009marpierc
 
Navigating the YANGscape of network automation
Navigating the YANGscape of network automationNavigating the YANGscape of network automation
Navigating the YANGscape of network automationRoman Dodin
 
Spring_Boot_Microservices-5_Day_Session.pptx
Spring_Boot_Microservices-5_Day_Session.pptxSpring_Boot_Microservices-5_Day_Session.pptx
Spring_Boot_Microservices-5_Day_Session.pptxPrabhakaran Ravichandran
 
Angular 4 fronts
Angular 4 frontsAngular 4 fronts
Angular 4 frontsbadal dubla
 
Unify logz with fluentd
Unify logz with fluentdUnify logz with fluentd
Unify logz with fluentdSoluto
 
apidays LIVE Jakarta - REST the events: REST APIs for Event-Driven Architectu...
apidays LIVE Jakarta - REST the events: REST APIs for Event-Driven Architectu...apidays LIVE Jakarta - REST the events: REST APIs for Event-Driven Architectu...
apidays LIVE Jakarta - REST the events: REST APIs for Event-Driven Architectu...apidays
 
FIWARE Global Summit - Real-time Media Stream Processing Using Kurento
FIWARE Global Summit - Real-time Media Stream Processing Using KurentoFIWARE Global Summit - Real-time Media Stream Processing Using Kurento
FIWARE Global Summit - Real-time Media Stream Processing Using KurentoFIWARE
 
Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Oleksii Prohonnyi
 
Fluentd and Embulk Game Server 4
Fluentd and Embulk Game Server 4Fluentd and Embulk Game Server 4
Fluentd and Embulk Game Server 4N Masahiro
 
03_clere-HTTP2 HTTP3 the State of the Art in Our Servers.pdf
03_clere-HTTP2 HTTP3 the State of the Art in Our Servers.pdf03_clere-HTTP2 HTTP3 the State of the Art in Our Servers.pdf
03_clere-HTTP2 HTTP3 the State of the Art in Our Servers.pdfJean-Frederic Clere
 

Similar to Fullstack Part 2 - Angular (20)

Angular2 getstart
Angular2 getstartAngular2 getstart
Angular2 getstart
 
Fluentd - road to v1 -
Fluentd - road to v1 -Fluentd - road to v1 -
Fluentd - road to v1 -
 
WebRTC: A front-end perspective
WebRTC: A front-end perspectiveWebRTC: A front-end perspective
WebRTC: A front-end perspective
 
What's New with Windows Phone - FoxCon Talk
What's New with Windows Phone - FoxCon TalkWhat's New with Windows Phone - FoxCon Talk
What's New with Windows Phone - FoxCon Talk
 
Fluentd - RubyKansai 65
Fluentd - RubyKansai 65Fluentd - RubyKansai 65
Fluentd - RubyKansai 65
 
DotDotPwn Fuzzer - Black Hat 2011 (Arsenal)
DotDotPwn Fuzzer - Black Hat 2011 (Arsenal)DotDotPwn Fuzzer - Black Hat 2011 (Arsenal)
DotDotPwn Fuzzer - Black Hat 2011 (Arsenal)
 
Webapps development on ubuntu
Webapps development on ubuntuWebapps development on ubuntu
Webapps development on ubuntu
 
El viaje de Angular1 a Angular2
El viaje de Angular1 a Angular2El viaje de Angular1 a Angular2
El viaje de Angular1 a Angular2
 
OGCE Overview for SciDAC 2009
OGCE Overview for SciDAC 2009OGCE Overview for SciDAC 2009
OGCE Overview for SciDAC 2009
 
Navigating the YANGscape of network automation
Navigating the YANGscape of network automationNavigating the YANGscape of network automation
Navigating the YANGscape of network automation
 
Spring_Boot_Microservices-5_Day_Session.pptx
Spring_Boot_Microservices-5_Day_Session.pptxSpring_Boot_Microservices-5_Day_Session.pptx
Spring_Boot_Microservices-5_Day_Session.pptx
 
Angular 4 fronts
Angular 4 frontsAngular 4 fronts
Angular 4 fronts
 
Unify logz with fluentd
Unify logz with fluentdUnify logz with fluentd
Unify logz with fluentd
 
apidays LIVE Jakarta - REST the events: REST APIs for Event-Driven Architectu...
apidays LIVE Jakarta - REST the events: REST APIs for Event-Driven Architectu...apidays LIVE Jakarta - REST the events: REST APIs for Event-Driven Architectu...
apidays LIVE Jakarta - REST the events: REST APIs for Event-Driven Architectu...
 
T2 Web Framework
T2 Web FrameworkT2 Web Framework
T2 Web Framework
 
FIWARE Global Summit - Real-time Media Stream Processing Using Kurento
FIWARE Global Summit - Real-time Media Stream Processing Using KurentoFIWARE Global Summit - Real-time Media Stream Processing Using Kurento
FIWARE Global Summit - Real-time Media Stream Processing Using Kurento
 
WebRTC on Mobile
WebRTC on MobileWebRTC on Mobile
WebRTC on Mobile
 
Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2
 
Fluentd and Embulk Game Server 4
Fluentd and Embulk Game Server 4Fluentd and Embulk Game Server 4
Fluentd and Embulk Game Server 4
 
03_clere-HTTP2 HTTP3 the State of the Art in Our Servers.pdf
03_clere-HTTP2 HTTP3 the State of the Art in Our Servers.pdf03_clere-HTTP2 HTTP3 the State of the Art in Our Servers.pdf
03_clere-HTTP2 HTTP3 the State of the Art in Our Servers.pdf
 

Recently uploaded

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 

Recently uploaded (20)

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 

Fullstack Part 2 - Angular

Editor's Notes

  1. Not learning angular, we learn how to make the app using angular
  2. - Typescript vs js Deployment code is pure static content => Can deploy to any webserver Typescript is super set of js
  3. Get the source code from github Using api at http://myerpapi.azurewebsites.net/api/ Login with accout: tu.tran@yahoo.com/123456
  4. Route with param useAsDefault RouterLink RouterOutle
  5. Route with param useAsDefault RouterLink RouterOutle
  6. Route with param
  7. Also introduce i18n and error handler
  8. Create new instance Using injection Mention disadvantage of auto inject