Getting Started: Ionic [closed]

Ionic

Ionic is a framework for developing hybrid applications that works on most smartphones and tablets on the market.

It is nothing more than a stack of components and other frameworks. These components are:

• Cordova: Integration with native device features
• AngularJS: Creating the App Web Part
• Ionic Module and Ionic CLI: Tools and Components provided by the framework

First of all, you must have NodeJS installed. After successfully installing NodeJS, you are prompted to add the Software Development Kit (SDK) of the platform (s) you want to work with (Android, iOS, Windows Phone).

Installing the tools

Run the command:

$ npm install -g cordova yo generator-angular generator-ionic ionic bower grunt

This command by itself will install the following:

• Cordova / Phonegap
• Yeoman
• Yeoman Generator for AngularJS Projects
• Ionic CLI (Command Line Tool)
• Bower
• Grunt

The -g parameter means that these commands will be installed globally, so you can use them directly from the terminal, not just the folder you are in.

Creating the Project

After installing the tools you have two options to create a project using Ionic.

The two options have their advantage and over time you will be able to better identify which one to use.

Ionic CLI

The first option is very simple and accounts in the Session Start section of the Ionic site itself. Just do the following:

Create the app using the command line

$ ionic start myApp tabs

Note: tabs is a ready template that will create a tabbed application. The basic options are:

blank (Em branco) / tabs(Abas) / sidemenu (Menu Lateral)

Add the desired platforms and start the emulator

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic run

Generator-Ionic with Yeoman

The second option also focuses on simplicity and to start the project with the yeoman generator just follow the steps:

Create a new directory and perform a cd :

$ mkdir my-ionic-project && cd $_

The option $_ means that it will use the last parameter of the last command, in our case the nome/caminho of the created directory.

Run yo ionic , optionally passing the App name.

$ yo ionic [app-name]

The Yeoman command-line tool will offer a series of questions. These are:

• Do you want to use Sass with Compass? (Requires Ruby installed)
• Which plugins of the cordova project do you want to include? (In this case they are plugins to use the features of the devices like: Contact list, camera, gps, etc ...)
• Do you want to use an initial template? [T] are initial templates (such as the last step) and [A] sample applications.

After answering these questions, Yeoman will do all the work of downloading and installing dependencies according to the options you select.

Browsing the Browser

To test the application directly in the browser, simply run the following command in the project folder:

$ ionic serve

If you used Yeoman :

$ grunt serve

A new tab / window will open and any changes you make to the code will be reflected by live-reload , excluding the need to run the command again.

Debug with Device

To do deploy of the device just add the desired platforms (if you have not already added), connect the device to the computer and run the ionic/grunt commands.

$ ionic run --device

or

$ grunt run --device

Articles :

• Tutorial Ionic - My first app
• Introduction to the Ionic Framework
• Creating an application with ionic
• Getting Started with Ionic
• Ionic Framework
• Getting Started
• Starting your app

Prerequisites

First you need to be aware of:

AngularJS is also required, but if you do not know, you can learn as you learn to interact with Ionic resources. However, I strongly recommend that you try to learn AngularJS. If you understand English, I recommend using Ionic's own documentation to learn how to use it, which is quite easy. And the AngularJS site has the for an Angle course taught by CodeShool.

Planting

Installation is very easy. First you install Node . Just download the installer and move on. Then install Cordova and Ionic through the command:

npm install -g cordova ionic

This command must be run on the terminal of your operating system. If it is in Windows, just open the cmd. In this single command you install Cordova and Ionic. The -g parameter determines that the installation will be global.

Then you need to prepare the environment for Android and IOS by following specific tutorials for each. But this can be done later, since Ionic can emulate the application in the browser through a special command.

Creating a Project

To create a project you must type in the terminal:

ionic start myApp tabs

myApp is the name of the project. tabs is the template, which can also be blank (blank) or sidemenu .

Running this, ionic will create the initial files for your app.

Running the App in the Browser

ionic serve --lab

The --lab parameter will display what it will look like on IOS and Android. Try running without this parameter so you can see the difference.

Article

This article is in Portuguese and makes clear the first steps.

Source: Ionic Documentation