Introduction to Ionic Framework:

In this blog post I will try to create a detailed and useful Ionic Framework Tutorial and I hope you'll like it. 
Ionic is a free and open source framework, built for creating a hybrid mobile application for Android and iOS devices. It uses web components such as HTML, CSS and JavaScript. Ionic framework is based on the Angular.js framework from Google. The long and short of it, if you want to build a mobile application, you need to know some front-end technologies and Ionic can help you build the mobile application in the Android or the iOS platform.

System requirements


First of all, when developing an Ionic application, it is necessary to install the Android SDK or the iOS SDK. For the development of an iOS mobile application it is mandatory to use a computer running the Apple OS (desktop or laptop). For Android OS we need a computer with either Windows, Linux version (I use Ubuntu 14.04) or Apple OS.


In this article we’ll implement an Android application, however before installing the Android SDK, be sure if you have the following installed on your computer: jdk, node.js, npm and bower, because Ionic requires these packages. If you not have  these packages installed, use the following steps:

Install jdk steps:

  1.  Check if Java is not already installed: java -version
  2.  If the command returns "The programjava can be found in the following packages", use: sudo apt- get install default- jre
  3.  After that, install jdk using: sudo apt- get install default- jdk

Steps to install node.js using Ubuntu terminal:

  1. curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
  2.  sudo apt-get install -y nodejs
  3.  Check node.js version: node -v

After node.js has been installed, you will need to install the npm package manager, because bower requires that, of course using Ubuntu terminal:

  1. sudo apt-get install npm
  2. Check npm version: npm -v

Bower install:

  1. npm install -g bower
  2. Check bower version: bower -v

Now we can safely install the Android SDK, using the following link, and steps: https://developer.android.com/studio/index.html

After the Android SDK has been installed, it is necessary to add this on your Ubuntu PATH for building your application in the apk file, using the following instructions in Ubuntu Terminal:

  1. export ANDROID_HOME={PATH to Android Sdk}
  2. export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
Install Ionic framework and project setup:

For installing the Ionic Framework I used the following command:

npm install -g cordova ionic

ionic framework

After install is finished you can use ionic -v command to see the Ionic version, which in my case is 1.7.15.

After the installation is complete, we can start developing a new application. In this article I've implemented a mobile application using the football-data.org rest API. In order for you to use that, you need to send an email to get the API key. That API contains approximatively 15 of the best football leagues from Europe, including Champions League and UEFA EURO 2016. Each league contains information about teams, players and fixtures.

The first step to create a project with Ionic Framework is:

ionic start liveFootball blank

ionic applications

The “liveFootball” section from the command is the name of our project and “blank” is the template of the project. If you want to use or create another template you can achieve this using the Ionic Creator (following image).

Ionic Framework Tutorial

For starting the application in your browser, go in the liveFootball directory and run the following command:

ionic serve –lab

Ionic Framework Tutorial
Implementation

The first step to implementation is to have a clear vision of the project’s structure. In the following image we can see the www directory, here we will write the code to implement our application. We have here the css directory, img directory, js directory and lib directory. I create a new directory, named “view directory” which contains the views of the project (partials and components). In the js directory, I've made more folder for controllers, models and
directives.

folders


Each view file from the partials directory, has a controller and a route. All routes are defined in app.js file.


...
$stateProvider
 .state('tabs', {
 url: "/tabs",
 abstract: true,
 templateUrl: "views/components/tabs.html"
 })
 .state('tabs.home', {
 url: "/home",
 views: {
 'main-tab': {
 templateUrl: "views/partials/home.html",
 controller: 'HomeCtrl'
 }
 }
 })
 .state('tabs.league-info', {
 url: "/league-info",
 params: {leagueID : null},
 views: {
 'main-tab': {
 templateUrl: "views/partials/league-info.html",
 controller: 'LeagueInfoCtrl'
 }
 }
 })
...

For connecting and using the rest API, I declared some constants as follows:


angular.module('liveFootball', ['ionic'])
 .constant('urls', {
 BASE: 'http://api.football-data.org/',
 BASE_API: 'http://api.football-data.org/v1/soccerseasons/',
 TEAM_URL: 'http://api.football-data.org/v1/teams',
 HEAD: {
 'X-Auth-Token': 'your API key'
 }
 });
..

In the “urls” constant we have 4 properties:

This constant will be used in models, in order to get data from the API.


…
function LeaguesTableFactory ($http, urls){
function LeaguesTable() {}
angular.extend(LeaguesTable.prototype, {
getLeagues: function () {
var getLeague = {
method: 'GET',
url: urls.BASE_API,
headers: urls.HEAD
}
return $http(getLeague);
},
...

In the previous code snippet, I've made a LeagueTableFactory when I inject $http and urls from app.js constants. After that I've made a function LeaguesTables, after which I use angular.extend to extend the LeaguesTable function and here I've  made some methods for each end-point, according to what I needed:

  • getLeagues – get all leagues from API;
  • getTeams - get all teams for each league;
  • getFixtures – get season fixtures;
  • getTables – get league season tables;
  • getTeam – get team information;
  • getTeamFix – get team all season fixtures;
  • getTeamPlayer – get list of team players.


LeagueTableFactory has been injected in each controller, because each view has a controller. For example, the home page has the following controller and view:

HomeCtrl.js controller:


(function () {
'use strict';
function HomeCtrl($scope, LeaguesTableFactory, $rootScope){
var self = this,
leagueTable = new LeaguesTableFactory();
function getAllLeagues() {
return leagueTable
.getLeagues()
.then(function (response){
$scope.leagues = response.data;
})
.catch(function (error){
console.log(error);
});
}
getAllLeagues();
return $scope.HomeCtrl = self;
}
HomeCtrl
.$inject = ['$scope', 'LeaguesTableFactory', '$rootScope'];
angular
.module('liveFootball')
.controller('HomeCtrl', HomeCtrl);
}());

home.html view:

Results: Home page

ios-android application-with-ionic

League info view, team info view, team players view, group view and club fixture view.

Ionic frameworkIonic application
Build Android application

To build your Ionic application, use the following commands:

  • cordova platform add android
  • ionic build android

After the build is finished, you will be able to find the .apk file in ../liveFootball/platforms/android/build/outputs/apk/android-debug.apk .

Ionic Framework Tutorial - Conclusions

Ionic Framework is great for developing hybrid mobile application, because it has great components from web (HTML/CSS/JS). If you have the knowledge to develop front-end applications with AngularJS, then it will be very easy to develop a mobile application with Ionic. The documentation of this framework is very detailed and on Google you can find plenty of code snippets, questions and answers.

The source code of this Ionic Framework Tutorial is here.

Share on:

Want to stay on top of everything?

Get updates on industry developments and the software solutions we can now create for a smooth digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Frequently Asked Questions

1. What is ASSIST Software's development process?  

The Software Development Life Cycle (SDLC) we employ defines the following stages for a software project. Our SDLC phases include planning, requirement gathering, product design, development, testing, deployment, and maintenance.

2. What software development methodology does ASSIST Software use?  

ASSIST Software primarily leverages Agile principles for flexibility and adaptability. This means we break down projects into smaller, manageable sprints, allowing continuous feedback and iteration throughout the development cycle. We also incorporate elements from other methodologies to increase efficiency as needed. For example, we use Scrum for project roles and collaboration, and Kanban boards to see workflow and manage tasks. As per the Waterfall approach, we emphasize precise planning and documentation during the initial stages.

3. I'm considering a custom application. Should I focus on a desktop, mobile or web app?  

We can offer software consultancy services to determine the type of software you need based on your specific requirements. Please explore what type of app development would suit your custom build product.   

  • A web application runs on a web browser and is accessible from any device with an internet connection. (e.g., online store, social media platform)   
  • Mobile app developers design applications mainly for smartphones and tablets, such as games and productivity tools. However, they can be extended to other devices, such as smartwatches.    
  • Desktop applications are installed directly on a computer (e.g., photo editing software, word processors).   
  • Enterprise software manages complex business functions within an organization (e.g., Customer Relationship Management (CRM), Enterprise Resource Planning (ERP)).

4. My software product is complex. Are you familiar with the Scaled Agile methodology?

We have been in the software engineering industry for 30 years. During this time, we have worked on bespoke software that needed creative thinking, innovation, and customized solutions. 

Scaled Agile refers to frameworks and practices that help large organizations adopt Agile methodologies. Traditional Agile is designed for small, self-organizing teams. Scaled Agile addresses the challenges of implementing Agile across multiple teams working on complex projects.  

SAFe provides a structured approach for aligning teams, coordinating work, and delivering value at scale. It focuses on collaboration, communication, and continuous delivery for optimal custom software development services. 

5. How do I choose the best collaboration model with ASSIST Software?  

We offer flexible models. Think about your project and see which models would be right for you.   

  • Dedicated Team: Ideal for complex, long-term projects requiring high continuity and collaboration.   
  • Team Augmentation: Perfect for short-term projects or existing teams needing additional expertise.   
  • Project-Based Model: Best for well-defined projects with clear deliverables and a fixed budget.   

Contact us to discuss the advantages and disadvantages of each model. 

ASSIST Software Team Members

See the past, present and future of tech through the eyes of an experienced Romanian custom software company. The ASSIST Insider newsletter highlights your path to digital transformation.

* I read and understood the ASSIST Software website's terms of use and privacy policy.

Follow us

© 2025 ASSIST Software. All rights reserved. Designed with love.