Ionic 4 - Build PWA and Mobile Apps with Angular

Name: Ionic 4 - Build PWA and Mobile Apps with Angular
Rating: 4.4 (244 reviews)

Build Progressive Web Apps, Native Android and iOS Apps with Ionic 4 and Angular

Created byBaljeet Singh

Last updated 8/2019

English

What you'll learn

Build Native Mobile Apps with Ionic 4
Build PWA with Ionic 4
Getting to know Ionic 4

Course content

6 sections • 61 lectures • 3h 39m total length

Introduction to Course1:34
Explore ionic fundamentals and angular components to build a cross-platform pwa and mobile app from a single code base, hosting it for android, ios, and desktop.
About Angular1:57
About Ionic3:13
Setup Development Environment1:22

Introduction0:43
Installing Ionic CLI0:54
Creating New Project3:08
Create a new Ionic app with the ionic start command using a chosen template (blank, tabs, or side menu), then build and preview in the browser using the device toolbar.
Note Regarding Lazy Loading Routes0:22
Understanding the Structure of Ionic Project5:55
Ionic Generator7:05
Learn how to generate pages with the Ionic generator command, create tabbed pages like home, to-do, about, and contact, and update routing, tabs, and icons in an Ionic Angular app.
Ionic Components Part 17:16
Ionic Components Part 27:07
Learn to build rich layouts with Ionic components, using ion-card with title, content, and images, and implement responsive grids with ion-grid and column sizing.
Adding Shared Component6:22
Adding Tabs Inside the Sidemenu Template11:27
Adding Sidemenu Inside the Tabs Template6:04
Adding Sidemenu and Tabs Inside the Blank Template13:25

Introduction0:28
Creating New Project1:02
Generating New Pages and Updating Tabs Menu5:58
Adding UI For The Top News Page3:30
Using Ionic Lab1:20
Creating News Service and Fetching Top News8:58
Using async Operator2:15
Moves Pages to Pages directory Similar to Ionic 31:50
Learn how to reorganize an Ionic 4 project by moving pages into a dedicated pages directory, creating service and components folders, and updating imports to mirror Ionic 3 structure.
Creating Shared Components5:57
Using HttpParamas to Pass the apiKey1:15
Finalize Top News Page2:31
Finalize the top news page by upgrading the article component, format publication dates with an Angular date pipe, display the article description and source, and apply labels.
Show Loading Spinner While Fetching Data5:48
Show a loading spinner while fetching data by using a loading controller in a service, logging fetched articles, and dismissing the spinner when data loads or after a five-second timeout.
Adding Pull To Refresh Functionality2:55
Headlines Page UI - Horizontal Scrolling List3:51
Build a headlines page with a horizontal scrolling list of category chips using Ionic 4. Create, style, and color chips with margins and a framed primary look.
Getting Data Based on a Specific Category5:00
Getting Category Data on the First Load2:26
Load category data on first load by calling a category service in the Ionic 4 Angular app, using the lifecycle and template rules to fetch and display news by category.
Using Skeleton Screens For Perceived Performance3:11
Working on the Sources Page5:16
Wire a new service and a sources property to fetch and parse EPA sources, then render named sources in a responsive grid with skeleton screens.
Adding Search Pipe to Filter Between Different Sources5:19
Add a search pipe to filter sources by name in an Ionic 4 Angular app, including creating, importing, and wiring the pipe to the sources data.
Adding Single Source Page and Back Button3:52
Showing Selected Source Articles3:54
Select a source by its id and fetch its articles on the source page, injecting the service and reading the id from the route to feed the articles component.
Using Sliding Options to Add to Favorites1:45
Using Ionic Storage6:07
Learn how to save items to favorites using Ionic storage in an Angular app by installing the storage plugin, injecting the storage service, and saving to local storage.
Adding Refresh Button To The Favorites1:46
Showing Toast Message1:52
Removing The Source From Favorites2:02
Adding Settings Page3:11

Introduction0:51
Discover publishing your Ionic 4 app as a progressive web app, reuse the same code base, and deploy to iOS, desktop via Electron, or with Cordova or Capacitor.
Adding PWA Support and Building App For Production2:13
Add progressive web app support to an Ionic 4 app using an Angular schematic, configure the service worker and manifest, and build for production for web deployment.
Deploying PWA on Firbase Hosting2:01
Learn to deploy a pwa to firebase hosting by creating a firebase project, installing firebase tools, logging in, and running firebase deploy to publish the app.
Installing PWA on The Mobile Device2:17
Running Application Inside the Android Emulator1:07
Publishing Application on Android Play Store1:48
Publishing Application on iOS App Store1:57
Publishing Application as Electron Desktop App0:39

Requirements

Basic HTML, CSS, JS knowledge
Typescript, Angular Fundamentals

Description

We can use Angular to create powerful frontend web applications powered by TypeScript / JavaScript. What if we can use the Angular knowledge to build applications that can be published as progressive web apps, native mobile apps running on any iOS or Android device and electron desktop apps with the same codebase.

Ionic 4 allows you to do just that. We can use your existing Angular, HTML, JS and CSS knowledge and build PWA, native mobile apps. This allows you to focus on the things you know and release your application on all possible devices (desktop and mobile) without having to learn different technologies to build apps for different platforms.

Ionic 4 is completely based on web components (Using Stencil).

This course takes you from zero to published app, taking a very practice-orientated route. We'll build a news app throughout this course, we'll see how we can use the Ionic component library, how to fetch and handle user input, how to store data and much more!

We will touch on various topics like Architecture, Components, Navigation, Tabs, Sidemenus, User Input, Native Device Features, Storage, Http, etc...

And since building apps is only part of the fun, you'll of course also learn how to run your apps either in the browser, on an emulator or on your own device!

What exactly are you going to learn then?

Angular Refresher
Ionic Fundamentals
How to set up your Ionic 4 projects
Using different Ionic 4 templates Blank, Tabs, and Sidemenus
The basics about Ionic 4 - How navigation works, how your project is structured and you use its rich component library
Ionic 4 project architecture
Creating a user interface with the Beautiful Ionic 4 Components
Show Modals, Alerts, Toasts and many more useful UI components
Test the app in the browser, on emulators and real devices
Using Ionic storage
Building PWA and deploy on Firebase Hosting
and much more ...

So Let's Get Started.

Who this course is for:

Web developers and specifically Angular developers who want to build Native Mobile Apps and Progressive Web Apps (PWA)

Ionic 4 - Build PWA and Mobile Apps with Angular

What you'll learn

Explore related topics

Course content

Getting Started4 lectures • 8min

Angular Fundamentals9 lectures • 35min

Ionic Fundamentals12 lectures • 1hr 10min

Creating News Application With Rest API27 lectures • 1hr 33min

Building and Publishing Application8 lectures • 13min

Course Roundup1 lecture • 1min

Requirements

Description

Who this course is for: