Setup dev environment for ionic framework


In the series of Ionic blog posts earlier we have seen why Ionic framework and what is crosswalk, now we are going to setup the dev environment for ionic framework.

Ionic is an MIT-licensed, front-end, open source framework for creating hybrid mobile apps. Built on top of AngularJS and Apache Cordova, Ionic provides tools, plugins and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, Sass and Javascript. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by using Cordova/PhoneGap. Ionic was created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013.

This ionic setup is for browser level only. Soon we will provide the environment setup steps for the mobile version.

Setting Up Ionic
Ionic is an npm module and requires Node.js. If you haven’t install Nodejs yet. You can get the Node installer from http://nodejs.org/. Once you have done, Ionic can be installed using Node’s package manager (npm).

Installing
npm install cordova ionic -g

This command will installed the Ionic and Apache Cordova modules globally. The modules themselves are installed in your user directory. On Linux the modules can be found in /usr/local. Once ionic is installed you can create the project with below command

Starting an ionic app

ionic start [appname] [template]

A starter template is what becomes the www directory within the Cordova project.

The default templates name are below:

  • tabs (Default)
  • sidemenu
  • maps
  • salesforce
  • tests
  • complex-list
  • blank

I have create with sidemenu template you can see some screenshots below:
And you can find code on Github

Screenshot from 2015-11-02 13_10_34 Screenshot from 2015-11-02 13_10_50 Screenshot from 2015-11-02 13_11_25

Thanks !!

Advertisements
This entry was posted in Scala and tagged , , , , . Bookmark the permalink.