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

World Immunization Day | Why is the best medicine in the human body?

Do you have any medicine? Capsules, fish oil, mel...

How much does it cost to develop the Haixi Toys mini program? How much is the price for developing Haixi Toys Mini Program?

The launch of mini programs has brought convenien...

APP planning and promotion: 3 essential qualities for screen-sweeping copywriting!

When promoting products, app planners and promote...

Millions of IPs Create Science Popularization and Technological Talents Talk About Strengthening the Country丨A Different Journey to the Moon

Humans have conducted many explorations on the mo...

If I sleep three or four hours today and more than ten hours tomorrow, can I make up for it?

One minute with the doctor, the postures are cons...

My parents are crazy about "scrolling through their phones". Is there any good way to prevent them from getting addicted?

Elderly people's addiction to mobile phones, ...

The darker the egg yolk, the more nutritious it is? Does sweating when you move mean you are weak? Here comes the July science rumor list →

1.The darker the egg yolk, the more nutritious it...

Low-speed electric vehicles: Regulations are becoming clearer and it is time for capital to enter the market

"Three months ago, I was an official, and no...

Comparison of Flutter and React Native for mobile development

【51CTO.com Quick Translation】Just a few years ago...

What’s wrong with Meituan monthly payment not being used? Cause Analysis

What’s wrong with Meituan monthly payment not bei...

Forgot where you parked your car? Google Maps can actually help you find your car

For some people who drive, there are two major tro...

Xiaohongshu product analysis report!

Xiaohongshu is known as a popular shopping tool f...

Even Sony's Takeshi Soeda doesn't dare to easily say that it's going smoothly. How can PS VR open up a new path in China?

The news of PS VR landing in China has become a h...

After losing 500,000 yuan in an event, I learned 4 "bloody" lessons

In recent days, a marketing director left a messa...

LeEco intervenes in the marriage between Coolpad and 360: a love triangle where both sides get what they want

A transaction worth 2.18 billion yuan brought LeT...