Ionic itself does not grant you the ability to communicate with device features such as GPS and Camera, instead it works side by side with Cordova to achieve this. Another great feature of Ionic is how loosely coupled all its components are. You can decide to use only some of Ionic on an already existing hybrid application if you wish to do so.
(For more resources related to this topic, see here.)
Features of Ionic
Ionic provides you with a lot of cool neat features and tricks that help you create beautiful and well-functional hybrid apps in no time. The features of Ionic come under three categories:
- CSS features
- Ionic CLI
To start off with, Ionic comes in stock with a great CSS library that provides you with some boilerplate styles. This Ionic CSS styles are generated with SASS, a CSS pre-processor for more advanced CSS style manipulation.
Some of the cool CSS features that come built-in with Ionic include:
- Header and Footers
- Forms Elements
- Grid System
All these features and many more come already provided for you and are easily customizable. They also have the same look and feel that native equivalents have, so you will not have to do any editing to make them look like native components.
Some of these features include:
- Action Sheet
- Side Menu
- Complex Lists
- Collection Repeat
The Ionic CLI
This is the final part that makes up the three major arms of the Ionic framework. The Ionic CLI is a very important tool that lets you use the issue Ionic commands via the command line/terminal. It is also with the Ionic CLI that we get access to some Ionic features that make our app development process more streamlined. It is arguably most important part of Ionic and it is also the feature you will use to do most actions.
The features of the Ionic CLI include:
- Creating Ionic projects
- Issuing Cordova commands
- Developing and testing
- Ionic splash/Icon generator
- Ionic labs
- Uploading the app to Ionic view
- Accessing Ionic.IO tools
The Ionic CLI is a very powerful tool, and for the most part it is the tool we will be using throughout this book to perform specific actions. This is why the first thing we are going to do is to set up the Ionic CLI.
Setting up Ionic
The following steps will give a brief of how to setup Ionic:
- Install Node JS: To set up Ionic, the first thing you will need to do is to install Node JS on your computer so that you can have access to Node Package Manager (NPM). If you already have node installed on your computer, you can skip this step and got to step 2.
- Go to www.nodejs.org and click on the Install button. That should download the latest version of Node JS on your computer. Don’t worry if you are on a Mac, PC, or Linux, the correct one for your operating system will be automatically downloaded.
- After the download is finished, install the downloaded software on your computer. You may need to restart your computer if you are running windows.
- Open up the terminal if you are on Mac/Linux or the Windows command line if you are on a Windows machine. Type the following command node –v and press Enter.
You should see the version number of your current installation of Node JS. If you do not see a version number, this might mean that you have not correctly installed Node JS and should try running step 1 again.
- Install Ionic CLI: The next step is to use NPM to install the Ionic CLI.
Open a new Terminal (OSX and Linux) or command line (Windows) window and run the npm install Ionic –g command.
If you are on Linux/OSX, you might need to run sudo install Ionic –g. This command will aim to install Ionic globally.
- After this has finished running, run the Ionic –v command on your Terminal/command line and press Enter.
You should have seen a version number of your Ionic CLI. This means that you have Ionic installed correctly and are good to go.
If you do not see a version number, then you have not installed Ionic correctly on your machine and should perform step 2 again.
The Ionic workflow
When you create a new Ionic project, there are a couple of folders and files that come in stock. You directory should look similar to the following screenshot:
The structure you see is pretty much the same as in every Cordova project with the exception of a few files and folders. For example, there is an scss folder. This contains a file that lets us customize the look and feel of our application.
You will also note that in your www/lib folder, there is a folder called ionic, which contains all the required files to run Ionic. There is a CSS, fonts, JS, and SCSS folder:
- CSS: This folder contains all the default CSS that come with an Ionic app.
- Fonts: Ionic comes with its own font and Icon library called Ionicons. This Ionicons library contains hundreds of icons, which are all available for use in your app.
- JS: This contains all the code for the core Ionic library. Since Ionic is built with angular, there is a version of Angular here with a bunch of other files that make up the ionic framework.
- SCSS: This is a folder that contains SASS files used to build the beautiful Ionic framework CSS styles. Everything here can be overwritten easily.
If you take a look at the root folder, you will see a lot of other files that are generated for you as part of the Ionic workflow. These files are not overly important now, but let’s take a look at the more important ones:
- Bower.json: This is the file that contains some of the dependencies gotten from the bower package manager. The bower dependencies are resolved in the lib folder by as specified in the bowerrc file. This is a great place to specify other third party dependencies that your project might need.
- Config.xml: This is the standard config file that comes along with any Phonegap/Cordova project. This is where you request permissions for device features and also specify universal and platform-specific configurations for you app.
- Gulpfile: Ionic uses the gulp build tool, and this file contains some code that is provided by Ionic that enables you do some amazing things.
- Ionic.project: This is a file specific for Ionic services. It is the file used by the Ionic CLI and the Ionic.IO services as a place to specify some of your Ionic specific configuration.
- Package.json: This is a file used by node to specify some node dependencies. When you create a project with the Ionic CLI, Ionic uses both the Node and Bowe Package manager to resolve some of your dependencies. If you require a node module when you are developing ionic apps, you can specify these dependencies here.
These files are some of the more important files that come stock with a project created with the Ionic CLI. At the moment, you do not need to worry too much about them but it’s always good to know that they exist and have an idea about what they actually represent.
In this article, we discussed exactly what Ionic means and what problems it aims to solve. We also got to discuss the CSS, JS, and Ionic CLI features of the Ionic framework lightly.
Resources for Article:
Further resources on this subject:
- Ionic JS Components [article]
- Creating Instagram Clone Layout using Ionic framework [article]
- A Virtual Machine for a Virtual World [article]