How to create Ionic project with Angular

Aditya
Aditya
Nov 24, 2020 · 2 min read

What is Ionic Framework?

Ionic framework is an open-source UI toolkit for building performance, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript. It allows developers to build once and run everywhere.

The Ionic framework mainly focuses on front-end user experience or UI interaction, which handles all the look and feel of your app. It is easy to learn and can integrate with other libraries or framework such as Angular, Cordova, etc. It can also be used as a standalone without a front-end framework using a simple script include.

Officially, the Ionic framework has integration with Angular, React and Vue.

How to install Ionic Framework?

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way. It is also the main tool through which to run the app and connect it to other services, such as Ionic AppFlow.

To install Ionic, make sure you have Node JS already installed in your system. If not, then you can click here to download and install node.

After installing Node you can open your terminal/command prompt and get started.

To install Ionic CLI with npm:

$ npm install -g @ionic/cli

If there was a previous installation of the Ionic CLI, it will need to be uninstalled due to a change in package name

$ npm uninstall -g ionic

$ npm install -g @ionic/cli

Start an app

Create an Ionic app using one of the pre-made app templates, or a blank one to start fresh. The three most common starters are blank starter, tabs starter and sidemenu starter.

We will create a tabs menu Ionic app. For this in your terminal type:

$ ionic start my-app tabs

After running this command it will ask you to select a JavaScript Framework, we will select Angular.

Next question will be for integrating Capacitor with your application. You can select either yes or no (depending on your requirement). For now we will select No.

Serve Ionic app

Once the setup is complete you can now serve your ionic app.

$ cd my-app

$ ionic serve

Once your project is compiled successfully, your browser will open at http://localhost:8100.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Aditya

Written by

Aditya

Frontend developer. Skilled in Angular, JavaScript, jQuery, SASS/SCSS and Bootstrap

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/. Don’t forget to check out Ask-NFT, a mentorship ecosystem we’ve started

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store