Ionic & Angular
0 likes447 views
The document presents a session on Ionic and Angular, emphasizing the importance of etiquette and engagement during the presentations. It covers key concepts like the Ionic framework for developing mobile applications, Progressive Web Apps (PWAs), and Angular as a development platform, along with their advantages and disadvantages. Additionally, it outlines the steps for installation and project setup within the Ionic ecosystem.
Ionic & Angular
- 1. Presented By:Deeksha Maurya & Anirudh Singh Chauhan Ionic & Angular
- 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. Our Agenda 01 Introduction to Ionic 02 Ionic Platform & Ecosystem 03 What is Angular? 04 Core Building Components of Ionic 05 Demo
- 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. What are PWA? PWA stands for Progressive Web Apps.PWA enhances web apps to look and feel like native mobile apps. It try to optimise the following– ● Reliability ● Fast ● Engaging Apps
- 6. Ionic Platform IONIC Web Components Web Native Mobile Ionic CLI +(Angular CLI,...) Project Management,Build Workflow Capacitor What you see on screen Web app running as Native Mobile app Creation,live reload,optimisation
- 7. Ionic Ecosystem Your App Your Code FrontEnd Framework Ionic Framework Capacitor or Cordova Host platform you are targeting Stencil A set of platform adapting pre-styled component A tool that allows you to generate the standard web components
- 8. What is Angular? Angular is a development platform, built on TypeScript. As a platform, Angular includes: ● A component-based framework for building scalable web applications ● A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more ● A suite of developer tools to help you develop, build, test, and update your code
- 9. Ionic Pros & Cons Pros ● Single code base and Multi platform ● Development cost reasonable ● All components will be updated from web directly ● In app interaction has look and feel consistent ● Web Technology Cons ● Run on web-View ● Base on plugins ● May require native related coding in device related issues.
- 10. Ionic Core Building Blocks UI Components State Management user location ,camera features and more. CSS & CSS Variables Custom or Built-in Router Themes & Styles Navigation Native Device Feature Passing Data Around <ion-card>,<ion-img> etc Ionic CLI & publishing Development and Deployment
- 11. Installing and Start first Project NodeJs has to be pre-installed (prefer the installation using nvm ) To install the ionic use → npm install -g ionic After the installation use →ionic start – to setup the project name and the type of webcomponent you will be using as either blank, menu or any other type. →ionic serve – to run the project on your local system
- 12. Demo
- 13. Demo
- 14. ● https://ionicframework.com/docs/api/grid ● https://www.javatpoint.com/ionic-alert ● https://ionicframework.com/docs/components References
- 15. Thank You ! Get in touch with us: Lorem Studio, Lord Building D4456, LA, USA