Build a simple hybrid cross-platform mobile app with Ionic

Build a simple hybrid cross-platform mobile app with Ionic

introduce

Since hybrid mobile development became popular, some web engineers have begun to switch to mobile development. Hybrid mobile development technology allows web engineers to develop mobile applications for various platforms without having to learn the native programming languages ​​of each platform. There are already many hybrid development platforms such as PhoneGap and Titanium to help us with hybrid programming. Today we are going to introduce a newer hybrid mobile development platform, Ionic.

Ionic is an advanced HTML5 hybrid mobile application development framework and an open source front-end framework. Ionic applications are based on Cordova, so Cordova-related tools can also be built into the application. Ionic focuses on visual effects and user experience, so AngularJS is used to build a variety of cool effects.

Install

To get started with Ionic development, you need to install Node.js.

Then install the corresponding Android or IOS platform according to your development environment. In this article, we will create an Android application.

Next you need to install a Cordova and Ionic command line tool, as follows:

  1.  npm install -g cordova ionic

After the installation is complete, you can try to start creating a project:

  1.  ionic start myIonicApp tabs

Enter the project directory, add the ionic platform, create an application, run it in a virtual machine, and become tall, rich and handsome...

  1.  cd myIonicApp
  2.  ionic platform add android
  3.  ionic build android
  4.  ionic emulate android

Here is the sample application effect:

start

We've got a good start, now let's create a ToDo list app. We start with the blank template:

  1.  ionic start myToDoList blank

If you go into the project directory, you will see the AngularJS file, this is where we will add the relevant code.

Creating and displaying lists

First, you need to add a list to your application. We will use ion-list directly. Add ion-list to www/index.html:

  1.  < ion-list >  
  2.  < ion-item > Scuba Diving </ ion-item >  
  3.  < ion-item > Climb Mount Everest </ ion-item >  
  4.  </ ion-list >  

Then let's take a look at what our HTML file looks like after adding ion-list:

  1.  <!DOCTYPE html >  
  2.  < html >   
  3.   
  4.  < head >  
  5.  < meta   charset = "utf-8" >  
  6.  < meta   name = "viewport"   content = "initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" >  
  7.  < title > </ title >   
  8.   
  9.  < link   href = "lib/ionic/css/ionic.css"   rel = "stylesheet" >  
  10.  < link   href = "css/style.css"   rel = "stylesheet" >   
  11.   
  12.  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
  13.  < link   href = "css/ionic.app.css"   rel = "stylesheet" >  
  14.  -- >   
  15.   
  16.  <!-- ionic/angularjs js -->  
  17.  < script   src = "lib/ionic/js/ionic.bundle.js" > </ script >   
  18.   
  19.  <!-- cordova script (this will be a 404 during development) -->  
  20.  < script   src = "cordova.js" > </ script >   
  21.   
  22.  <!-- your app's js -->  
  23.  < script   src = "js/app.js" > </ script >  
  24.  </ head >   
  25.   
  26.  < body   ng-app = "starter" >   
  27.   
  28.  < ion-pane >  
  29.  < ion-header-bar   class = "bar-stable" >  
  30.  < h1   class = "title" > My ToDo List </ h1 >  
  31.  </ion-header-bar>​​  
  32.  < ion-content >  
  33.  < ion-list >  
  34.  < ion-item > Scuba Diving </ ion-item >  
  35.  < ion-item > Climb Mount Everest </ ion-item >  
  36.  </ ion-list >  
  37.  </ ion-content >  
  38.  </ ion-pane >  
  39.  </ body >   
  40.   
  41.  </ html >  

Then we can create a controllers.js file in www/js/ to define a new cntroller, we will call it ToDoListCtrl for now. Here is the content of the controllers.js file:

  1.  angular.module( 'starter.controllers' , [])
  2.  .controller( 'ToDoListCtrl' , function ($scope) {
  3.  });

In the above code, we defined a module called starter and a Controller called ToDoListCtrl.

Then we need to add this module to our application. Open www/js/app.js and add the module:

  1.  angular.module( 'starter' , [ 'ionic' , 'starter.controllers' ])
  2.  .run( function ($ionicPlatform) {
  3.  $ionicPlatform.ready( function () {
  4.  if (window.StatusBar) {
  5.  StatusBar.styleDefault();
  6.  }
  7.  });
  8.  })

Let's go ahead and define a $scope to carry the items in the ToDo list. Declare a new $scope variable in ToDoListCtrl as follows:

  1.  .controller('ToDoListCtrl', function ($scope) { 
  2.   
  3.  $ scope.toDoListItems = [{
  4.  task: 'Scuba Diving',
  5.  status: 'not done'
  6.  }, {
  7.  task: 'Climb Everest',
  8.  status: 'not done'
  9.  }]
  10.  });

Add controllers.js to index.html:

  1.  < ion-list   ng-controller = "ToDoListCtrl" >  
  2.  < ion-item   ng-repeat = "item in toDoListItems" >  
  3.  {{item.task}}
  4.  </ ion-item >  
  5.  </ ion-list >  

In the code above, we added bar-positive to add color to the application. You can add many different headers in the same way. There is detailed documentation here: here.

We now need to add a button in index.html to trigger the event:

  1.  < script   id = "modal.html"   type = "text/ng-template" >  
  2.  < div   class = "modal" >   
  3.   
  4.  < div   class = "bar bar-header bar-calm" >  
  5.  < button   class = "button"   ng-click = "closeModal()" > back </ button >  
  6.  < h1   class = "title" > Add Item </ h1 >  
  7.  </ div >  
  8.  < br > </ br >  
  9.  < br > </ br >  
  10.  < form   ng-submit = "AddItem(data)" >  
  11.  < div   class = "list" >  
  12.  < div   class = "list list-inset" >  
  13.  < label   class = "item item-input" >  
  14.  < input   type = "text"   placeholder = "ToDo Item"   ng-model = "data.newItem" >  
  15.  </ label >  
  16.  </ div >  
  17.  < button   class = "button button-block button-positive"   type = "submit" >  
  18.  Add Item
  19.  </ button >  
  20.  </ div >  
  21.  </ form >   
  22.   
  23.  </ div >  
  24.  </ script >  

Now let's confirm that in the above operation, we added a header, an input box and a button to the modal.

We also need a back button in the header, which is used to trigger the closeModal() function.

Now we start binding ionic modal to our controller. We inject $ionicModal into the controller as follows:

  1.  angular.module('starter.controllers', [])
  2.  .controller('ToDoListCtrl', function ($scope, $ionicModal) {
  3.  //array list which will contain the items added
  4.  $ scope.toDoListItems = [];
  5.  //init the modal
  6.  $ionicModal.fromTemplateUrl('modal.html', {
  7.  scope: $scope,
  8.  animation: 'slide-in-up'
  9.  }).then(function (modal) {
  10.  $ scope.modal = modal;
  11.  });
  12.  // function to open the modal
  13.  $ scope.openModal = function () {
  14.  $scope.modal.show();
  15.  };
  16.  // function to close the modal
  17.  $ scope.closeModal = function () {
  18.  $scope.modal.hide();
  19.  };
  20.  //Cleanup the modal when we're done with it!
  21.  $scope.$on('$destroy', function () {
  22.  $scope.modal.remove();
  23.  });
  24.  //function to add items to the existing list
  25.  $ scope.AddItem = function (data) {
  26.  $scope.toDoListItems.push({
  27.  task: data.newItem,
  28.  status: 'not done'
  29.  });
  30.  data.newItem = '' ;
  31.  $scope.closeModal();
  32.  }; 
  33.   
  34.  });

In the above code, we use .fromTemlateUrl to load the HTML content, and then define the $scope and animation types through two options during initialization.

Of course we also define methods to open and close the moda and add items to the array.

run

Okay, everything is ready, let’s start the virtual machine. It looks good, right?

Summarize

In this article, we have seen a rough process of using Ionic. You can see the detailed code here. If you want to learn more, you should learn more about AngularJS.

Reference: If you are interested, you can read this basic AngularJS development tutorial: Introduction to Practical Programming of AngularJS Development Framework Part 1

via sitepoint

<<:  Chinese Internet companies may join forces to give Apple an embarrassing problem

>>:  Apple is rumored to be planning a new 4-inch iPhone in 2015

Recommend

How can I make my promotion rank around the third position on the left? How do I know my PPC position?

Promotion is in the third position on the left. T...

Internet TV is constrained by panels and the low-price strategy is no longer effective

LeTV TV, which has always been a disruptor with i...

A small plant of Suaeda salsa is actually a master of tidal flat soil restoration

Every autumn and winter, you can always see a gia...

How did I achieve 300,000 sales using a social network?

After I used text messages to activate lost custo...

How to open a Kuaishou merchant account? A complete guide to the registration process for Kuaishou merchant accounts!

As time goes by, the Kuaishou market is constantl...

Saudi Arabia: The title of "Oil Kingdom" is not my whole background

In the Middle East There is such a country In the...

Papi Jiang's success also relies on the recommendation of seed users. Perhaps social networking is the bargaining chip for mobile video to ask for capital.

As 2016 draws to a close, mobile videos represent...

How to improve user retention rate? Let’s talk about the big thing called “user retention”!

In the Internet industry, users who start using a...

Uncover the secrets of Tik Tok’s explosive growth and addiction!

In the past six months, especially during the epi...

Train ticket scalpers upgrade their technology: 2G broadband + exhaustive verification code

Today, you can buy train tickets for the last day ...

Look carefully, there is a big truck parked in this zoo!

In our zoo, every time autumn comes, we have a su...

How to use short videos to direct traffic to the live broadcast room!

This is a relatively hardcore article. In additio...

Asian Winter Science Popularization Issue 15丨Freestyle Skiing: How do athletes soar into the sky with the power of the wind?

...

Why does outdoor exercise help slow the progression of myopia?

Now we often hear that taking children to outdoor...

ChinaJoy is not so hot: it looks like the same old faces

The summit forum held one day before ChinaJoy (Ch...