When it comes to working in the tech freelance industry, it’s extremely important to always keep learning. It’s always beneficial to add more skills to your developer portfolio. This shows future clients that you are driven and that you like to stay on top of the latest technology trends. Moses from Silicon Valley recommends to, “always have side projects to help keep you constantly investigate and to try new things. You never know when you’ll have to use those skills.” Now, this app tutorial may help you get to the next step in your career so why not give it a shot? Ionic is a popular mobile app framework that allows developers to write their apps using web technologies without having to have a deep understanding of mobile languages such as Java or Objective C. In this app tutorial, we will cover:

• How to install Ionic
• The configure for building on multiple platforms
• How to preview and debug the app
• How to build a “hello world” application

Step 1: Install Ionic

First, install Node.js. Then, update the latest npm and install the latest Cordova and Ionic. Update the latest npm:

$ npm install npm - g

Then install the latest Cordova and Ionic using npm.

$ npm install - g ionic cordova

Let’s create and name your first app tutorial as ‘helloworld’ with a blank template.

$ ionic start helloworld blank

Step 2: Configuring Platforms

Cordova gives you the power to write computer programming code once and run on many mobile app platforms (iOS, Android, Blackberry, Windows, etc). But you have to explicitly tell Cordova (with Ionic) which mobile app platform should be included in any given project. For our HelloWorld app, we will be trying it out with two platforms (iOS and Android).

$ cd HelloWorld
$ ionic platform add ios
$ ionic platform add android

Step 3: Previewing the App

Firstly, we can use the server option to preview our app tutorial in the browser using Ionic.

$ ionic serve

Next, the command will open up a browser at http://localhost:8100. As a result of browser screen is too large to preview a mobile app but we can use the Responsive Design View of Browser in order to view it properly. Responsive Design View of Browser

$ ionic build Android
$ ionic emulate Android

Most importantly, be sure to substitute “android” with “iOS” to build for iOS. Note:

• Follow the Android and iOS mobile app platform guides to install required platform dependencies.
• iOS development requires Mac OS X. iOS simulator through the Ionic CLI Since the Ionic CLI requires an ios-sim npm package, this can be installed with the command sudo npm -g install ios-sim.

Step 4: Making a helloworld app instead of a blank app

Ionic is a basically a SPA web app. We need a master index.html but we don’t need routes since the helloworld app is just a one view app. In this app tutorial, it is important that we first update our app’s www/index.html and www/js/app.js to make sure the structure looks like the one below.

Say hello to the world with Ionic

 

        
            
                Hello world
                Bonjour le monde
            
        
    

App.js

// Ionic Starter App
angular.module('helloworld', ['ionic']);

As seen in the code above, using the ion-list, we now have hard coded 2 items in our to-do list. In order for the app to be fully functional, we should be able to add and view list items dynamically.

Next…

Inside, www/js/ create a controllers.js file and define a new controller called HelloController inside it. Here is how the controllers.js file looks:

angular.module('helloworld.controllers', [])
    .controller('HelloController', function($scope) {
        $scope.helloList = [{
            country: 'US',
            sayHello: 'Hello World'
        }, {
            country: 'Frank',
            sayHello: 'Bonjour le monde'
        }, {
            country: 'German',
            sayHello: 'Hallo Welt'
        }]
    });

In the above code, we have defined a new module called helloworld.controllers in addition to a new controller called HelloController. Next, we will add this module to our existing application. Open www/js/app.js and add in this module. Here is how the app.js code looks after adding the new helloworld.controllers module.

angular.module('helloworld', [
    'ionic',
    'helloworld.controllers'
]);

Include the controllers.js in the index.html after app.js. We need to attach the above controller logic to our ion-list in the index.html. Modify the ion-list as shown below:

    
        
            {{item.sayHello}}
        
    

Step 5: Adding Items to the List

Next, we need to implement a way to add items to the existing list. For this, we’ll make use of ionicModal which will slide up after clicking a button on the listing page. First, add a new button on top of the listing page to add new items to the list. Next, let’s make our header look more colorful by making use of the ion-header-bar. Modify the code as shown below:

Say hello to the world with Ionic

    As you can see in the code above, we’ve added an ion-header-bar with a class bar-positive which is what gives it that color. You can have many different types of headers for this app tutorial. Here are more details on how to do so. In addition, we have also added a new button to our header called ‘Add,’ which calls a function to open a modal window.

Almost finished with the app tutorial…

Add the modal pop up to the index.html as shown below before the and move ng-controller=”HelloController” to theelement, so the controller also affects the element too. See the example code below.

As per the code above, we now have a header inside our modal, an input box and an Add button to add new items to the to-do list. Now we have a back button in the header, which we have attached as a closeModal() function by using ng-click to close the modal. We have attached a function called AddItem to a form using ng-submit, which has added items to the existing list on the form submit. Our last step of this app tutorial is binding the ionic modal to our controller. Finally, we will inject $ionicModal to the controller and define the required functions as shown below:

angular.module('helloworld.controllers', [])
    .controller('HelloController', function($scope, $ionicModal) {
        $scope.helloList = [{
            country: 'US',
            sayHello: 'Hello World'
        }, {
            country: 'Frank',
            sayHello: 'Bonjour le monde'
        }, {
            country: 'German',
            sayHello: 'Hallo Welt'
        }]
        // Init the modal
        $ionicModal.fromTemplateUrl('modal.html', {
            scope: $scope,
            animation: 'slide-in-up'
        }).then(function(modal) {
            $scope.modal = modal;
        });
        // Show modal
        $scope.openAddHelloModal = function() {
            $scope.modal.show();
        };
        // Close the modal
        $scope.closeModal = function() {
            $scope.modal.hide();
        };
        // Cleanup the modal when done
        $scope.$on('$destroy', function() {
            $scope.modal.remove();
        });
        // Add new item to list
        $scope.AddHello = function(data) {
            $scope.helloList.push({
                country: 'Test',
                sayHello: data.newItem
            });
            data.newItem = '';
            $scope.closeModal();
        };
    });

It’s always helpful to stay on top of your code writing, especially when it comes to mobile app platforms. Stay tuned for more coding and app tutorials from the team here at Pangara!