So you just noticed that Ionic 4 was released and you finally want to get started with cross platform app development? Well today is your days because we’ll go through building your first Ionic 4 application with HTTP Calls to the Open Movie Database!
Whether you are completely new to Ionic at all or have used other versions of Ionic before and now decided to get started with version 4, we go through all the basics to setup a new app, routing and even API calls to display async data inside our app.
Setting up Our Ionic 4 App
If you are new to Ionic you need to make sure you have the Node Package Manager installed but if you have worked with other web technologies before chances are pretty good you already got everything you need.
So then if you also haven’t used Ionic before, you need to install it trough npm and then you are finally ready to create your Ionic 4 project!
To setup a blank project you can use the Ionic CLI so we end up with a fresh Ionic 4 project with Angular support (you could also use React or Vue, better support coming later this year).
Once the project is created we cd into the folder and also use the CLI, which basically uses the Angular CLI under the hood, to create new pages for our app that we want to display.
ionic g page pages/movies
ionic g page pages/movieDetails
ionic g service services/movie
This will open the browser with the preview of your app which will reload automatically once you change anything inside your project.
Speaking of project, we got a bunch of files and folders in here, let’s see what all of this means. We will focus on the src folder of our app since we don’t have to worry about the rest for now.
This is the folder where we will make all the code changes that follow later in this tutorial. It already contains a home folder that’s basically a page like we created before, but I like to have all pages in their own pages folder so you can remove the home folder as well for now.
The pages folder contains the actual views/pages of our app, which means the element we will see on the screen. Right now we already got 2 pages in here, and each page you create with the CLI comes with 4 files:
module.ts: The Angular module for a page. Each page is basically their own module (related to the Angular architecture) with imports and styling
page.html: The HTML markup for a page
.scss: The styling for the specific page (more on global styling later)
page.spec.ts: An automatically added testing file for your page. Good if you want to set up automated unit tests
page.ts: The controller for a page that contains the Javascript code that manages the functionality