ionic-getting-started

Getting Started with Ionic

Ionic is cross platform open source framework for building a progressive web application and hybrid mobile apps. It uses Angular with TypeScript. It provides UI components for developing mobile apps such as sidemenu, tabs, segments, buttons and much more. It uses Cordova (ionic-native) for accessing device functionality such as camera, geolocation, google maps ..etc.

Before starting

Before starting this lesson, I strongly recommend to read Ionic / cordova environment setup article and make sure you have a proper development environment to build & run your ionic project. Note: Since, Ionic is cross platform all commands are same on Windows, Linux & Mac environment

This lesson, we’re going to learn, how to create your first Ionic Project, add & remove new platforms and plugins; and learn how to run your ionic project on browser & devices

Creating your first ionic project

To create new ionic project you need to execute following commands on your terminal.

ionic start AppName blank

where,

  • ionic start is a command for starting a new project
  • AppName is your application name
  • blank is a template name. other template names: blank, sidemenu, tab

Once you have created a new project, we need to change our working directory for adding platform and plugins. to do that,

cd AppName

Serving into browser

If you want to run your project on browser, you can execute

ionic serve

Working with platforms

If you’re thinking about creating apps for android & ios, you must need to add platforms with your current project.

Note: You must need Mac for running ios

Adding platform

To add new platform, we need to execute following commands (If you want to build/run your application for a device, you must add platform)

ionic cordova platform add <platform-name>
ionic cordova platform add android
ionic cordova platform add ios

If you want to add any specific version of platform, you can use

ionic cordova platform add android@7.0.0

Removing platform

Incase, If you want to remove platform you need to execute

ionic cordova platform rm <platform-name>
ionic cordova platform rm android
ionic cordova platform rm ios

Listing platform

If you want to see currently added platforms to your project, you need to execute

ionic cordova platforms

Working with plugins

Plugins are used for accessing device specific features such as accessing camera, geolocation, finger print authentication and more.

Adding plugin: If you want to add plugin, you can follow this

ionic cordova plugin add <plugin-name>
ionic cordova plugin add cordova-plugin-device
ionic cordova plugin add cordova-plugin-geolocation

If you want to add any specific  version of plugin you can follow this

ionic cordova plugin add cordova-plugin-geolocation@1.0.0

Removing plugin: If you want to remove any plugins, you can execute this

ionic cordova plugin rm <plugin-name>
ionic cordova plugin rm cordova-plugin-device
ionic cordova plugin rm cordova-plugin-geolocation

Listing plugins: If you want to know all added plugins with your project, you can execute these cmd

ionic cordova plugins

Building & running your app

If you want to generate executable or want to build, you need to follow this

ionic cordova build android
ionic cordova build ios

If you want to run your current application on connected device/emulator, you can execute following command

ionic cordova run android
ionic cordova run ios

Note: you must have configuration for this.

Useful Links:

Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+