Ionic 5 Framework With Angular 11

Introduction

Ionic is a mobile app development framework for web developers. Ionic is used for building cross platform mobile, desktop, web apps. Ionic is an open-source SDK (Software Development Kit) for cross platform mobile app development framework created by Max Lynch, Adam Bradley and Ben Sperry of Drifty Co. in 2013. The latest stable release 5.3.4 was launched in 25 September 2020. Ionic uses HTML, CSS and JavaScript with integration for Angular, React, and Vue.

Getting Started

First, we need to install Node.js, an open-source runtime environment. Using Node.js we can execute JavaScript code outside the browser.

Use the below link to download and install Node:

Node.js

After installing node.js we need to check if it's installed correctly or not, type the following commands in command prompt.

node -v
npm -v

Ionic CLI

Now, we need install the Ionic CLI so that we can start using Ionic commands. Ionic CLI is a Command Line Interface for developing Ionic apps. It can help us to get everything running for Ionic.

We can install Ionic CLI globally using npm,

npm install -g @ionic/cli

Run the above command in the command prompt. Once the installation is done, we are set to create Ionic app. For checking the version simply run the following command:

ionic -version

You get detailed information about the installed version. Here, Ionic CLI 6.13.1 is installed. See the above figure for an example.

Locate the path where we want to create our app in our Node.js command prompt.

First, Type the following command to create our new app.

ionic start

Just simply choose whichever JavaScript framework to use for our new app and hit the enter. I am choosing Angular. So, use Up-Down arrow keys to choose framework.

Then, you need type Project name. Here, I am Giving the name as IonicDemo. Then hit the Enter.

Then next pick the perfect starter template. This template comes packed with everything we need to build our app. I am choosing here Blank which is the simplest template that we can use. You can use any one of them. It will generate the code with that template structure.

Use up-down arrow keys to choose template.

ionic project created and all the dependencies installed

A new app is being created in the Node.js command prompt. Sit back and wait. This will take some time.

Once the installation in completed, navigate to inside the folder where Ionic app is created using following command.

navigate to project folder - cd IonicDemo

After navigating into the folder, if you want to edit the code, we require code editor. There are many editors like Notepad, Sublime Text, Notepad++, Visual Studio Code and many more. I recommend you ‘Visual Studio Code’. It’s really cool because this editor provides integrated terminal, debugger, Git sharing, IntelliSense, Live Share and many more features provided in this editor. I’ll give you link below for downloading editor.

Download Visual Studio Code: https://code.visualstudio.com/download

Next, type the command to open your app in Visual Studio Code.

Command

code .

Our Ionic app code will open in Visual Studio Code.

Here, we can find a couple of files that Ionic with Angular creates. We will discuss the files in detailed manner in next article.

Now, let’s run the code. Go to the ‘Terminal’ tab in Visual Studio Code and select ‘New Terminal’ as below.

This will open a terminal window. You can run any command directly using terminal window. Just simply type the command and hit.

For running this ionic app use the following command.

ionic serve --o

This will compile and run code in a new browser as below. After successful compiling and bundling it will generate browser running app and loads into browser or emulator.

Here I used Chrome browser which is a very developer friendly tool.

The Ionic app runs on http://localhost:8100/

Here I used Blank Starter template that’s why a simple app will be generated like below.

When the app loads in browser, press F12 or Right click and choose inspect option. And you can get Mobile App View in browser. You can add UI Components and Customize the app in your way.

Ionic Blank Starter template in Mobile View app

This was all about how to create new Ionic App, Ionic Environment, Installation, Ionic CLI and etc.

In the next part of this series, we will discuss how to customize Ionic app, add UI Components, Project Structure, important files including e2e, node_modules, src, configuration files like angular.json, ionic.config.json, package.json, package-lock.json, tsconfig.json and more. Thank you.

I hope you guys learned something new.

Happy Learning!!!......