Ionic 4 - Build PWA and Mobile Apps with Angular | Baljeet Singh | Skillshare

Ionic 4 - Build PWA and Mobile Apps with Angular

Baljeet Singh, Freelance Full Stack Developer, Instruct

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
58 Lessons (3h 42m)
    • 1. Introduction to Course

      1:34
    • 2. About Angular

      1:57
    • 3. About Ionic

      3:13
    • 4. Setup Development Environment

      1:22
    • 5. Introduction

      0:35
    • 6. Installing Angular CLI

      0:49
    • 7. Creating New Project

      4:03
    • 8. Adding Components

      4:31
    • 9. Angular Routing

      4:23
    • 10. Adding and Lazy Loading Components

      6:36
    • 11. Adding Services

      8:07
    • 12. @Input() and @Output Decorator

      5:15
    • 13. Introduction

      0:43
    • 14. Installing Ionic CLI

      0:54
    • 15. Creating New Project

      3:08
    • 16. Understanding the Structure of Ionic Project

      5:55
    • 17. Ionic Generator

      7:05
    • 18. Ionic Components Part 1

      7:16
    • 19. Ionic Components Part 2

      7:07
    • 20. Shared Components

      6:22
    • 21. Adding Tabs Inside the Sidemenu Template

      11:27
    • 22. Adding Sidemenu Inside the Tabs Template

      6:04
    • 23. Adding Sidemenu and Tabs Inside the Blank Template

      13:25
    • 24. Introduction

      0:28
    • 25. Creating New Project

      1:00
    • 26. Creating New Project

      1:02
    • 27. Generating New Pages and Updating Tabs Menu

      7:10
    • 28. Generating New Pages and Updating Tabs Menu

      5:58
    • 29. Adding UI For The Top News Page

      3:30
    • 30. Using Ionic Lab

      1:20
    • 31. Creating News Service and Fetching Top News

      8:58
    • 32. Using async Operator

      2:15
    • 33. Moves Pages to Pages directory Similar to Ionic 3

      1:50
    • 34. Creating Shared Components

      5:57
    • 35. Using HttpParamas to Pass the apiKey

      1:15
    • 36. Finalize Top News Page

      2:31
    • 37. Show Loading Spinner While Fetching Data

      5:48
    • 38. Adding Pull To Refresh Functionality

      2:55
    • 39. Headlines Page UI Horizontal Scrolling List

      3:51
    • 40. Getting Data Based on a Specific Category

      5:00
    • 41. Getting Category Data on the First Load

      2:26
    • 42. Using Skeleton Screens For Perceived Performance

      3:11
    • 43. Working on the Sources Page

      5:16
    • 44. Adding Search Pipe to Filter Between Different Sources

      5:19
    • 45. Adding Single Source Page and Back Button

      3:52
    • 46. Showing Selected Source Articles

      3:54
    • 47. Using Sliding Options to Add to Favorites

      1:45
    • 48. Using Ionic Storage

      6:07
    • 49. Adding Refresh Button To The Favorites

      1:46
    • 50. Showing Toast Message

      1:52
    • 51. Removing The Source From Favorites

      2:02
    • 52. Adding Settings Page

      3:11
    • 53. Introduction

      0:51
    • 54. Adding PWA Support and Building App For Production

      2:13
    • 55. Deploying PWA on Firbase Hosting

      2:01
    • 56. Installing PWA on The Mobile Device

      2:17
    • 57. Running Application Inside the Android Emulator

      1:07
    • 58. Course Roundup

      0:22

About This Class

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.