86

Ionic Installation

In this section, we are going to learn how to set up an environment for the successful development of the Ionic application.

Pre-requisite for Ionic

1. Node.js and NPM
2. Code Editor
3. Ionic CLI

Install Node.js and NPM

Node.js and NPM are the base platforms need to develop the Ionic application. You can install Node.js and NPM package manager by the link given below.

Install Node.js on Windows: Click Here

Install Node.js on Linux: Click Here

To verify Node.js and NPM, use the following command as shown in the below image.

Code Editor

VS Code editor is the best code editor to create the Ionic Applications. It is a popular and free text editor made by Microsoft.

You can download and install the VS Code Click Here

There are many other code editors available to create the Ionic application, such as

• Ionic Studio: It is the fastest and easiest way to create Ionic apps.
• Atom: It is a hackable text editor developed by the GitHub.
• WebStorm: It is a powerful non-free editor developed by the JetBrains.

Ionic CLI

We can create and develop an Ionic application through the Ionic Command Line Utility. The Ionic CLI is a preferred method for installing Ionic. It is the main tool for running the app and connect it to other services, such as Ionic AppFlow.

To install the Ionic CLI globally with the NPM, enter the following command in the terminal window.

When the Ionic is successfully installed on your system, you will get the following screen.

Create App

After the successful installation, you can build the Ionic app. To create an Ionic app, you need to navigate the location where you want to store the app. Therefore, first, go to the terminal window and execute the following command.

Whenever you run the above command, it will ask you to write the Project name. Now, enter the name of your project and press enter. You will get the following screen.

In this screen, you will see the different types of templates. Here, you can choose any template according to your need. We can learn about the different types of the template as follows:

Tabs App

If you choose the tabs template, the Ionic app contains the tab menu, header, and a couple of useful screens and functionalities. It is the default Ionic template. The following command creates the tabs app.

Side Menu App

If you choose the side menu template, it just adds the side menu with navigation in the content area of your app. The following command creates the sidemenu app.

Blank App

It is a blank starter project or an empty project. The following command creates the blank app.

First Ionic App

Here, we are going to start the project with the blank template. To start the blank Ionic app, execute the following command in the terminal window. It will install all your required dependencies like Angular or Ionic dependencies.

Now, you need to navigate to your newly created project and run it with the following command.

When you run the above command, your terminal window looks like the below image.

After completing all the steps, you will get the output in the browser, which you can see in the below image.

Now, open the chrome developer tools or press ctrl+shift+I. In this tool, when you click on the toggle device toolbar, you will get the following screen.

Next, if you want to change anything or modifying anything in the app, you need to have a code editor or IDE to write the code. Here, we are going to use Visual Studio Code Editor, which is a free IDE for web development.

Open Project in VS Code

Open the Visual Studio Code Editor, go to the menu bar and click on File->Open Folder and then select your project. Inside Visual Studio Code, the following screen appears.

Install Angular Essential Extension

To install Angular Essential Extension, Go to View->Extensions or Press ctrl+shift+x. Now type the Angular Essential in the search box, you will get the following screen in visual studio editor. Click Install.

After completing the installation, go to the Project Explorer, which appears on the left side of the visual studio code editor. Now, open the home.page.html file and write the following code.

Next, open the home.page.ts file and write the following code.

Now, save the file and run the project in the terminal. You will get the following output in your browser window.

When you click on the CHANGE TEXT button, it looks like the below image.

---