What is Ionic?
What is Angular?
Setting up Ionic Development surroundings
Although you’ll be able to develop mobile apps on any operation system of your selection except for this tutorial i’m assumptive that you simply ar victimization Microsoft Windows operation system. to figure with Ionic we want to put in some packages and tools like NodeJS and NPM on our machine. maybe you have already got these packages put in, thus check that your surroundings is about up properly and you have got upgraded these packages to their latest versions.
Installing NodeJS and NPM
NodeJS installer also will install NPM on your machine that could be a package manager for managing NodeJS packages and modules. Please confine mind that npm gets updated a lot of oft than Node will, thus you’ll be wanting to form positive it is the latest version. fortuitously npm is aware of a way to upgrade itself. Run the subsequent command in command window to upgrade npm.
npm install [email protected] -g
You can now verify the node and npm versions by running
You can currently verify the node and npm versions by running following the command in command window.
node -v npm -v
Ionic is put in as a NodeJS package through the Node Package Manager (npm) directly from the statement. Run the subsequent command in command window to put in latest version of Ionic. The -g flag can install Ionic globally thus we are able to access it from anyplace in our machines. it’ll conjointly add Ionic tools like Ionic CLI to our Windows operation system PATH in order that we tend to don’t got to set the trail ourselves.
npm install -g [email protected]
You can verify the Ionic installed version by running the following command in command window.
Ionic comes with tool referred to as Ionic CLI that could be a statement interface to perform plenty of Ionic magic. It is accustomed produce, build, test, and deploy Ionic apps onto any platform. The statement interface is a touch daunting if you’re accustomed a user interface (Graphic User Interface) approach, however it’s very super easy once you get the droop of it and you’ll be able to do some cool stuff with it and save heap of your development time once building Ionic apps.
Creating AN Ionic Project
Create a replacement directory in your classification system and navigate to the directory location in Command Window to make a replacement Ionic project. kind the subsequent command to make a replacement Ionic Project with the name food-recipes-app and press Enter. you may be asked to settle on one templet from the list of ready-made app templates Ionic provides. For this tutorial you’ll be able to select sidemenu templet.
ionic start food-recipes-app
Once Ionic project is made navigate to the freshly created food-recipes-app folder exploitation the subsequent command
Running Ionic Project
We can serve and preview our freshly created app within the browser exploitation Ionic command line interface serve command.
ionic serveThe command can open up a browser at http://localhost:8100. The browser screen is just too giant to preview a mobile app and for that reason, Ionic further -- research lab as associate degree choice to running the app within the browser therefore on preview the app higher because it would be seen in humanoid and iOS.