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 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
ionic startis a command for starting a new project
AppNameis your application name
blankis 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,
Serving into browser
If you want to run your project on browser, you can execute
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
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 [email protected]
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
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 [email protected]
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.