SlideShare a Scribd company logo
Presented By:Anirudh Singh Chauhan
Navigation and Routing
in Ionic Apps
Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Join the session 5 minutes prior to
the session start time. We start on
time and conclude on time!
Feedback
Make sure to submit a constructive
feedback for all sessions as it is
very helpful for the presenter.
Silent Mode
Keep your mobile devices in silent
mode, feel free to move out of
session in case you need to attend
an urgent call.
Avoid Disturbance
Avoid unwanted chit chat during
the session.
Agenda
01
Navigation & Routing
02
How Navigation Works?
03
LifeCycle Hooks
04
Tabs Navigation in Ionic
05
Demo
06
Introduction & key features of Ionic
Introduction to Ionic
● Ionic Framework is an open-source UI toolkit that allows high-quality mobile and
desktop applications to be developed using web technologies.
● Ionic Architecture is based on the application’s interface or user experience.
● It is easy to learn, easy to integrate, or used standalone without a front frame
using a simple script including other libraries or frameworks
Key features of Ionic
● Platform Independent Framework
● Cross-Platform Mobile Application Development
● Default User Interface
● Comprehensive Integration With Angular/React etc
● Capacitor & Cordova Plugins
● Designed for Elegance and High Performance
● Extended Technology
● Integration with Various Extensions
Navigation & Routing
● Navigation properties describe the relationship between two
entity types. They allow us to navigate from one end of the
relationship to the other end.
● It is switching between the pages.
/products [navigate()/routerlink] /products/id5
How Navigation Works?
/products navigate()/routerlink /products/id
Ionic StackController
Internal
Stack of Pages
Ionic NavController
Injectable
<ion-back-button>
navigate()/routerlink
Push Page
Pop Page
LifeCycle Hooks
Angular Component
ngOnInit
Ionic Pages
ngOnDestroy
ionViewDidLeave
ionViewWillLeave
ionViewDidEnter
ionViewWillEnter
Ionic Page Events
Event Name Description
ionViewWillEnter Fired when the component routing to is about to
animate into view.
ionViewDidEnter Fired when the component routing to has finished
animating.
ionViewWillLeave Fired when the component routing from is about to
animate.
ionViewDidLeave Fired when the component routing to has finished
animating.
Tabs in Ionic
● Ionic Tabs are considered to be the top-level
navigation component and helps to add tab-based
navigation.
● The ion-tabs component is a router outlet without
having a particular style.
● It has separate set of navigation page-stacks.
Route guards in Ionic
● Route guards create the process of protecting few routes and redirecting the user
quite simple. Ionic guards like ionViewCanEnter to determine whether or not a user
could navigate to a page.
● The basic idea behind a route guard is that you attach a service that acts as the
“route guard” to a particular route.
1. canActivate
Service has a canActivate method which will result in either true or false
depending on whether the user should be permitted to go to that route or
not.
2. canLoad
● canLoad can be used instead of canActivate to entirely prevent the
loading of the children for that route (rather than just preventing access).
● canLoad guard is used to decide if a module can be loaded or not.
Demo
Demo
● https://ionicframework.com/docs
● https://www.javatpoint.com/ionic
● https://ionicframework.com/docs/components/ion-tabs
References
Thank You !
Get in touch with us:
Lorem Studio, Lord Building
D4456, LA, USA

More Related Content

Similar to Navigation and Routing in Ionic Apps

Top 10 Angular Best Practices to Improve Your App?
Top 10 Angular Best Practices to Improve Your App?Top 10 Angular Best Practices to Improve Your App?
Top 10 Angular Best Practices to Improve Your App?
Agile Infoways LLC
 
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 meetup 2 2019-08-29
Angular meetup 2   2019-08-29Angular meetup 2   2019-08-29
Angular meetup 2 2019-08-29
Nitin Bhojwani
 
Navigation in react native
Navigation in react nativeNavigation in react native
Navigation in react native
Stats-Imam
 
Flutter vs Ionic: Which framework is better for cross platform application d...
Flutter vs Ionic: Which framework is better  for cross platform application d...Flutter vs Ionic: Which framework is better  for cross platform application d...
Flutter vs Ionic: Which framework is better for cross platform application d...
Mobiloitte
 
Ionic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application FrameworkIonic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application Framework
Sanjay Kumar
 
Apple Watch and Xamarin (NoVA Mobile C# Dev Group 4/8/15)
Apple Watch and Xamarin (NoVA Mobile C# Dev Group 4/8/15)Apple Watch and Xamarin (NoVA Mobile C# Dev Group 4/8/15)
Apple Watch and Xamarin (NoVA Mobile C# Dev Group 4/8/15)
Ed Snider
 
20190826 ianjoseph_FinalPresentation
20190826 ianjoseph_FinalPresentation20190826 ianjoseph_FinalPresentation
20190826 ianjoseph_FinalPresentation
Ian Joseph
 
Final presentation aldy ian - pwa
Final presentation   aldy ian - pwaFinal presentation   aldy ian - pwa
Final presentation aldy ian - pwa
Muhamad Aldy Bintang
 
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesIonic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Jacob Friesen
 
Is Ionic good for Mobile app development?
Is Ionic good for Mobile app development?Is Ionic good for Mobile app development?
Is Ionic good for Mobile app development?
adityakumar2080
 
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic
Wan Muzaffar Wan Hashim
 
A11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile appsA11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile apps
Ashton Williams
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application development
Kunjan Thakkar
 
VIPER Architecture
VIPER ArchitectureVIPER Architecture
VIPER Architecture
Ahmed Lotfy
 
Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Us...
Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Us...Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Us...
Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Us...
Niklas Heidloff
 
Common Ionic Development Mistakes Developers Tend To Make!
Common Ionic Development Mistakes Developers Tend To Make!Common Ionic Development Mistakes Developers Tend To Make!
Common Ionic Development Mistakes Developers Tend To Make!
Techugo
 
Hybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJSHybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJS
Zvika Epstein
 
Apple Watch Kit trainning slide [team iOS - RikkeiSoft]
Apple Watch Kit trainning slide [team iOS - RikkeiSoft]Apple Watch Kit trainning slide [team iOS - RikkeiSoft]
Apple Watch Kit trainning slide [team iOS - RikkeiSoft]
Hoang Ngo Anh
 
Getting started with the Ionic Framework
Getting started with the Ionic FrameworkGetting started with the Ionic Framework
Getting started with the Ionic Framework
Anuradha Weeraman
 

Similar to Navigation and Routing in Ionic Apps (20)

Top 10 Angular Best Practices to Improve Your App?
Top 10 Angular Best Practices to Improve Your App?Top 10 Angular Best Practices to Improve Your App?
Top 10 Angular Best Practices to Improve Your App?
 
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 meetup 2 2019-08-29
Angular meetup 2   2019-08-29Angular meetup 2   2019-08-29
Angular meetup 2 2019-08-29
 
Navigation in react native
Navigation in react nativeNavigation in react native
Navigation in react native
 
Flutter vs Ionic: Which framework is better for cross platform application d...
Flutter vs Ionic: Which framework is better  for cross platform application d...Flutter vs Ionic: Which framework is better  for cross platform application d...
Flutter vs Ionic: Which framework is better for cross platform application d...
 
Ionic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application FrameworkIonic - Hybrid Mobile Application Framework
Ionic - Hybrid Mobile Application Framework
 
Apple Watch and Xamarin (NoVA Mobile C# Dev Group 4/8/15)
Apple Watch and Xamarin (NoVA Mobile C# Dev Group 4/8/15)Apple Watch and Xamarin (NoVA Mobile C# Dev Group 4/8/15)
Apple Watch and Xamarin (NoVA Mobile C# Dev Group 4/8/15)
 
20190826 ianjoseph_FinalPresentation
20190826 ianjoseph_FinalPresentation20190826 ianjoseph_FinalPresentation
20190826 ianjoseph_FinalPresentation
 
Final presentation aldy ian - pwa
Final presentation   aldy ian - pwaFinal presentation   aldy ian - pwa
Final presentation aldy ian - pwa
 
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without CompromisesIonic Mobile Applications - Hybrid Mobile Applications Without Compromises
Ionic Mobile Applications - Hybrid Mobile Applications Without Compromises
 
Is Ionic good for Mobile app development?
Is Ionic good for Mobile app development?Is Ionic good for Mobile app development?
Is Ionic good for Mobile app development?
 
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic
 
A11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile appsA11Y Camp - Lessons learnt from building accessible native mobile apps
A11Y Camp - Lessons learnt from building accessible native mobile apps
 
Introduction to hybrid application development
Introduction to hybrid application developmentIntroduction to hybrid application development
Introduction to hybrid application development
 
VIPER Architecture
VIPER ArchitectureVIPER Architecture
VIPER Architecture
 
Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Us...
Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Us...Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Us...
Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Us...
 
Common Ionic Development Mistakes Developers Tend To Make!
Common Ionic Development Mistakes Developers Tend To Make!Common Ionic Development Mistakes Developers Tend To Make!
Common Ionic Development Mistakes Developers Tend To Make!
 
Hybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJSHybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJS
 
Apple Watch Kit trainning slide [team iOS - RikkeiSoft]
Apple Watch Kit trainning slide [team iOS - RikkeiSoft]Apple Watch Kit trainning slide [team iOS - RikkeiSoft]
Apple Watch Kit trainning slide [team iOS - RikkeiSoft]
 
Getting started with the Ionic Framework
Getting started with the Ionic FrameworkGetting started with the Ionic Framework
Getting started with the Ionic Framework
 

More from Knoldus Inc.

Java 17 features and implementation.pptx
Java 17 features and implementation.pptxJava 17 features and implementation.pptx
Java 17 features and implementation.pptx
Knoldus Inc.
 
Chaos Mesh Introducing Chaos in Kubernetes
Chaos Mesh Introducing Chaos in KubernetesChaos Mesh Introducing Chaos in Kubernetes
Chaos Mesh Introducing Chaos in Kubernetes
Knoldus Inc.
 
GraalVM - A Step Ahead of JVM Presentation
GraalVM - A Step Ahead of JVM PresentationGraalVM - A Step Ahead of JVM Presentation
GraalVM - A Step Ahead of JVM Presentation
Knoldus Inc.
 
Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)
Knoldus Inc.
 
Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)
Knoldus Inc.
 
DAPR - Distributed Application Runtime Presentation
DAPR - Distributed Application Runtime PresentationDAPR - Distributed Application Runtime Presentation
DAPR - Distributed Application Runtime Presentation
Knoldus Inc.
 
Introduction to Azure Virtual WAN Presentation
Introduction to Azure Virtual WAN PresentationIntroduction to Azure Virtual WAN Presentation
Introduction to Azure Virtual WAN Presentation
Knoldus Inc.
 
Introduction to Argo Rollouts Presentation
Introduction to Argo Rollouts PresentationIntroduction to Argo Rollouts Presentation
Introduction to Argo Rollouts Presentation
Knoldus Inc.
 
Intro to Azure Container App Presentation
Intro to Azure Container App PresentationIntro to Azure Container App Presentation
Intro to Azure Container App Presentation
Knoldus Inc.
 
Insights Unveiled Test Reporting and Observability Excellence
Insights Unveiled Test Reporting and Observability ExcellenceInsights Unveiled Test Reporting and Observability Excellence
Insights Unveiled Test Reporting and Observability Excellence
Knoldus Inc.
 
Introduction to Splunk Presentation (DevOps)
Introduction to Splunk Presentation (DevOps)Introduction to Splunk Presentation (DevOps)
Introduction to Splunk Presentation (DevOps)
Knoldus Inc.
 
Code Camp - Data Profiling and Quality Analysis Framework
Code Camp - Data Profiling and Quality Analysis FrameworkCode Camp - Data Profiling and Quality Analysis Framework
Code Camp - Data Profiling and Quality Analysis Framework
Knoldus Inc.
 
AWS: Messaging Services in AWS Presentation
AWS: Messaging Services in AWS PresentationAWS: Messaging Services in AWS Presentation
AWS: Messaging Services in AWS Presentation
Knoldus Inc.
 
Amazon Cognito: A Primer on Authentication and Authorization
Amazon Cognito: A Primer on Authentication and AuthorizationAmazon Cognito: A Primer on Authentication and Authorization
Amazon Cognito: A Primer on Authentication and Authorization
Knoldus Inc.
 
ZIO Http A Functional Approach to Scalable and Type-Safe Web Development
ZIO Http A Functional Approach to Scalable and Type-Safe Web DevelopmentZIO Http A Functional Approach to Scalable and Type-Safe Web Development
ZIO Http A Functional Approach to Scalable and Type-Safe Web Development
Knoldus Inc.
 
Managing State & HTTP Requests In Ionic.
Managing State & HTTP Requests In Ionic.Managing State & HTTP Requests In Ionic.
Managing State & HTTP Requests In Ionic.
Knoldus Inc.
 
Facilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptxFacilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptx
Knoldus Inc.
 
Performance Testing at Scale Techniques for High-Volume Services
Performance Testing at Scale Techniques for High-Volume ServicesPerformance Testing at Scale Techniques for High-Volume Services
Performance Testing at Scale Techniques for High-Volume Services
Knoldus Inc.
 
Snowflake and its features (Presentation)
Snowflake and its features (Presentation)Snowflake and its features (Presentation)
Snowflake and its features (Presentation)
Knoldus Inc.
 
Terratest - Automation testing of infrastructure
Terratest - Automation testing of infrastructureTerratest - Automation testing of infrastructure
Terratest - Automation testing of infrastructure
Knoldus Inc.
 

More from Knoldus Inc. (20)

Java 17 features and implementation.pptx
Java 17 features and implementation.pptxJava 17 features and implementation.pptx
Java 17 features and implementation.pptx
 
Chaos Mesh Introducing Chaos in Kubernetes
Chaos Mesh Introducing Chaos in KubernetesChaos Mesh Introducing Chaos in Kubernetes
Chaos Mesh Introducing Chaos in Kubernetes
 
GraalVM - A Step Ahead of JVM Presentation
GraalVM - A Step Ahead of JVM PresentationGraalVM - A Step Ahead of JVM Presentation
GraalVM - A Step Ahead of JVM Presentation
 
Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)
 
Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)Nomad by HashiCorp Presentation (DevOps)
Nomad by HashiCorp Presentation (DevOps)
 
DAPR - Distributed Application Runtime Presentation
DAPR - Distributed Application Runtime PresentationDAPR - Distributed Application Runtime Presentation
DAPR - Distributed Application Runtime Presentation
 
Introduction to Azure Virtual WAN Presentation
Introduction to Azure Virtual WAN PresentationIntroduction to Azure Virtual WAN Presentation
Introduction to Azure Virtual WAN Presentation
 
Introduction to Argo Rollouts Presentation
Introduction to Argo Rollouts PresentationIntroduction to Argo Rollouts Presentation
Introduction to Argo Rollouts Presentation
 
Intro to Azure Container App Presentation
Intro to Azure Container App PresentationIntro to Azure Container App Presentation
Intro to Azure Container App Presentation
 
Insights Unveiled Test Reporting and Observability Excellence
Insights Unveiled Test Reporting and Observability ExcellenceInsights Unveiled Test Reporting and Observability Excellence
Insights Unveiled Test Reporting and Observability Excellence
 
Introduction to Splunk Presentation (DevOps)
Introduction to Splunk Presentation (DevOps)Introduction to Splunk Presentation (DevOps)
Introduction to Splunk Presentation (DevOps)
 
Code Camp - Data Profiling and Quality Analysis Framework
Code Camp - Data Profiling and Quality Analysis FrameworkCode Camp - Data Profiling and Quality Analysis Framework
Code Camp - Data Profiling and Quality Analysis Framework
 
AWS: Messaging Services in AWS Presentation
AWS: Messaging Services in AWS PresentationAWS: Messaging Services in AWS Presentation
AWS: Messaging Services in AWS Presentation
 
Amazon Cognito: A Primer on Authentication and Authorization
Amazon Cognito: A Primer on Authentication and AuthorizationAmazon Cognito: A Primer on Authentication and Authorization
Amazon Cognito: A Primer on Authentication and Authorization
 
ZIO Http A Functional Approach to Scalable and Type-Safe Web Development
ZIO Http A Functional Approach to Scalable and Type-Safe Web DevelopmentZIO Http A Functional Approach to Scalable and Type-Safe Web Development
ZIO Http A Functional Approach to Scalable and Type-Safe Web Development
 
Managing State & HTTP Requests In Ionic.
Managing State & HTTP Requests In Ionic.Managing State & HTTP Requests In Ionic.
Managing State & HTTP Requests In Ionic.
 
Facilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptxFacilitation Skills - When to Use and Why.pptx
Facilitation Skills - When to Use and Why.pptx
 
Performance Testing at Scale Techniques for High-Volume Services
Performance Testing at Scale Techniques for High-Volume ServicesPerformance Testing at Scale Techniques for High-Volume Services
Performance Testing at Scale Techniques for High-Volume Services
 
Snowflake and its features (Presentation)
Snowflake and its features (Presentation)Snowflake and its features (Presentation)
Snowflake and its features (Presentation)
 
Terratest - Automation testing of infrastructure
Terratest - Automation testing of infrastructureTerratest - Automation testing of infrastructure
Terratest - Automation testing of infrastructure
 

Recently uploaded

(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdfARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
Inglês no Mundo Digital
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
ScrumGathering New Orleans 2024 Catherine Louis.pdf
ScrumGathering New Orleans 2024  Catherine Louis.pdfScrumGathering New Orleans 2024  Catherine Louis.pdf
ScrumGathering New Orleans 2024 Catherine Louis.pdf
Global Agile Consulting- CLL-Group, LLC
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 

Recently uploaded (20)

(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdfARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
ARTIFICIAL INTELLIGENCE (AI) IN MUSIC.pdf
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
ScrumGathering New Orleans 2024 Catherine Louis.pdf
ScrumGathering New Orleans 2024  Catherine Louis.pdfScrumGathering New Orleans 2024  Catherine Louis.pdf
ScrumGathering New Orleans 2024 Catherine Louis.pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 

Navigation and Routing in Ionic Apps

  • 1. Presented By:Anirudh Singh Chauhan Navigation and Routing in Ionic Apps
  • 2. Lack of etiquette and manners is a huge turn off. KnolX Etiquettes Punctuality Join the session 5 minutes prior to the session start time. We start on time and conclude on time! Feedback Make sure to submit a constructive feedback for all sessions as it is very helpful for the presenter. Silent Mode Keep your mobile devices in silent mode, feel free to move out of session in case you need to attend an urgent call. Avoid Disturbance Avoid unwanted chit chat during the session.
  • 3. Agenda 01 Navigation & Routing 02 How Navigation Works? 03 LifeCycle Hooks 04 Tabs Navigation in Ionic 05 Demo 06 Introduction & key features of Ionic
  • 4. Introduction to Ionic ● Ionic Framework is an open-source UI toolkit that allows high-quality mobile and desktop applications to be developed using web technologies. ● Ionic Architecture is based on the application’s interface or user experience. ● It is easy to learn, easy to integrate, or used standalone without a front frame using a simple script including other libraries or frameworks
  • 5. Key features of Ionic ● Platform Independent Framework ● Cross-Platform Mobile Application Development ● Default User Interface ● Comprehensive Integration With Angular/React etc ● Capacitor & Cordova Plugins ● Designed for Elegance and High Performance ● Extended Technology ● Integration with Various Extensions
  • 6. Navigation & Routing ● Navigation properties describe the relationship between two entity types. They allow us to navigate from one end of the relationship to the other end. ● It is switching between the pages. /products [navigate()/routerlink] /products/id5
  • 7. How Navigation Works? /products navigate()/routerlink /products/id Ionic StackController Internal Stack of Pages Ionic NavController Injectable <ion-back-button> navigate()/routerlink Push Page Pop Page
  • 8. LifeCycle Hooks Angular Component ngOnInit Ionic Pages ngOnDestroy ionViewDidLeave ionViewWillLeave ionViewDidEnter ionViewWillEnter
  • 9. Ionic Page Events Event Name Description ionViewWillEnter Fired when the component routing to is about to animate into view. ionViewDidEnter Fired when the component routing to has finished animating. ionViewWillLeave Fired when the component routing from is about to animate. ionViewDidLeave Fired when the component routing to has finished animating.
  • 10. Tabs in Ionic ● Ionic Tabs are considered to be the top-level navigation component and helps to add tab-based navigation. ● The ion-tabs component is a router outlet without having a particular style. ● It has separate set of navigation page-stacks.
  • 11. Route guards in Ionic ● Route guards create the process of protecting few routes and redirecting the user quite simple. Ionic guards like ionViewCanEnter to determine whether or not a user could navigate to a page. ● The basic idea behind a route guard is that you attach a service that acts as the “route guard” to a particular route.
  • 12. 1. canActivate Service has a canActivate method which will result in either true or false depending on whether the user should be permitted to go to that route or not. 2. canLoad ● canLoad can be used instead of canActivate to entirely prevent the loading of the children for that route (rather than just preventing access). ● canLoad guard is used to decide if a module can be loaded or not.
  • 13. Demo
  • 14. Demo
  • 15. ● https://ionicframework.com/docs ● https://www.javatpoint.com/ionic ● https://ionicframework.com/docs/components/ion-tabs References
  • 16. Thank You ! Get in touch with us: Lorem Studio, Lord Building D4456, LA, USA