Download appDownload App

Ionic 4 - Build PWA and Mobile Apps with Angular

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...

  • All levels
  • English

Course 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 an...

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 your from zero to published app, taking a very practice-orientated route. We will build a news app throughout this course, we will see how we can use 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 will of course also learn how to run your apps either in the browser, on an emulator or on your own device!

What you’ll learn
  • Anuglar 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 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

Covering Topics

1
Section 1 : Getting Started
2
Section 2 : Angular Fundamentals
3
Section 3 : Ionic Fundamentals
4
Section 4 : Creating News Application With Rest API
5
Section 5 : Building and Publishing Application
6
Section 6 : Course Roundup

Curriculum

      Section 1 : Getting Started
1
Introduction to Course Preview
2
About Angular
3
About Ionic
4
Setup Development Environment
      Section 2 : Angular Fundamentals
5
Introduction
6
Installing Angular CLI Preview
7
Creating New Project
8
Adding Components
9
Angular Routing
10
Adding and Lazy Loading Components
11
Adding Services
12
@Input() and @Output Decorator
      Section 3 : Ionic Fundamentals
13
Introduction
14
Installing Ionic CLI
15
Creating New Project
16
Understanding the Structure of Ionic Project
17
Ionic Generator
18
Ionic Components Part 1
19
Ionic Components Part 2
20
Adding Shared Component Preview
21
Mixing Tabs and Sidemenu Templates
      Section 4 : Creating News Application With Rest API
22
Introduction
23
Creating New Project
24
Generating New Pages and Updating Tabs Menu
25
Adding UI For The Top News Page
26
Using Ionic Lab
27
Creating News Service and Fetching Top News
28
Using async Operator
29
Moves Pages to Pages directory Similar to Ionic 3
30
Creating Shared Components
31
Using HttpParamas to Pass the apiKey
32
Finalize Top News Page
33
Show Loading Spinner While Fetching Data
34
Adding Pull To Refresh Functionality
35
Headlines Page UI - Horizontal Scrolling List
36
Getting Data Based on a Specific Category
37
Getting Category Data on the First Load
38
Using Skeleton Screens For Perceived Performance
39
Working on the Sources Page
40
Adding Search Pipe to Filter Between Different Sources
41
Adding Single Source Page and Back Button
42
Showing Selected Source Articles
43
Using Sliding Options to Add to Favorites
44
Using Ionic Storage
45
Adding Refresh Button To The Favorites
46
Showing Toast Message
47
Removing The Source From Favorites
48
Adding Settings Page
      Section 5 : Building and Publishing Application
49
Introduction
50
Adding PWA Support and Building App For Production
51
Deploying PWA on Firbase Hosting
52
Installing PWA on The Mobile Device
53
Running Application Inside the Android Emulator
      Section 6 : Course Roundup
54
Course Roundup
      Section 6 : Course Roundup
54
Course Roundup

Frequently Asked Questions

It is an online tutorial that covers a specific part of a topic in several sections. An Expert teaches the students with theoretical knowledge as well as with practical examples which makes it easy for students to understand.

A Course helps the user understand a specific part of a concept. While a path and E-Degrees are broader aspects and help the user understand more than just a small area of the concept.

A Course will help you understand any particular topic. For instance, if you are a beginner and want to learn about the basics of any topic in a fluent manner within a short period of time, a Course would be best for you to choose.

We have an inbuilt question-answer system to help you with your queries. Our support staff will be answering all your questions regarding the content of the Course.