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

The next trend of smart hardware has not yet really appeared

Nowadays, there are too many entrepreneurial proj...

How much does it cost to develop a Shannan Chemical mini program? What is the quote for Shannan Chemical Mini Program development?

WeChat Mini Program is an application that users ...

Will the more online promotion channels there are, the better the campaign results will be?

Let me answer the question in the title first: Wr...

Operation Case | Simple is the best way. How well do you know your operation business?

I saw a friend post this in the circle of friends...

Meizu Blue 6T review: A good dual-camera product for 799 yuan

1Redefining the 100-yuan bucket phone Meizu Blue ...

Day doesn't understand the darkness of night! How does Android Q beat iOS 13?

Google I/O 2019 will be held at the Shoreline Amp...

3 steps to brand marketing promotion: refine selling points, interpretation and production!

Brand building is a long process. Although it is ...

Aiti Tribe Story Collection (14): Sharing helps improve operation and maintenance capabilities

[Original article from 51CTO.com] The protagonist...

Introduction to 360 search onebox advertising CPT promotion!

onebox...

PSA joins hands with Huawei to create a connected car phone to take over all car information

During the Hannover Industrial Fair (April 23-27)...

What does the promotion display of opening an account on Toutiao look like?

What does the promotion display of opening an acc...

91 Ten Articles-New Energy Vehicle Industry Briefing: Xiaomi may use Great Wall Motors production line to manufacture cars

1. Li Zhenyu, Vice President of Baidu Group and G...

Can you eat raw eggs and soft-boiled eggs? You should understand these principles before eating

Recently, many people on the Internet have been d...

If the Earth doesn't end in a helium flash, what will end in it?

The science fiction novel "The Wandering Ear...

Fuel cells have promising development prospects, but hydrogen storage remains the biggest obstacle

Since 2017, the fuel cell industry has begun to d...