I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

I asked the following question which turned out to be quite a popular one:

From this blog post we have this example of a prototypal inheritance in JavaScript:

var human = {
    name: '',
    gender: '',
    planetOfBirth: 'Earth',
    sayGender: function () {
        alert(this.name + ' says my gender is ' + this.gender);
    },
    sayPlanet: function () {
        alert(this.name + ' was born on ' + this.planetOfBirth);
    }
};

var male = Object.create(human, {
    gender: {value: 'Male'}
});

var female = Object.create(human, {
    gender: {value: 'Female'}
});

var david = Object.create(male, {
    name: {value: 'David'},
    planetOfBirth: {value: 'Mars'}
});

var jane = Object.create(female, {
    name: {value: 'Jane'}
});

david.sayGender(); // David says my gender is Male
david.sayPlanet(); // David was born on Mars

jane.sayGender(); // Jane says my gender is Female
jane.sayPlanet(); // Jane was born on Earth

Now, what I’m wondering is how does one properly “override”, for example, the sayPlanet function?

I tried it like this:

jane.sayPlanet = function(){
    console.log("something different");
};

and this works.

However, I also tried it like this:

var jane = Object.create(female, {
    name: {value: 'Jane'},

    sayPlanet: function(){
        console.log("something different");
    }
});

but I get a type error.

My questions are:

• how can I add the sayPlanet function inside the Object.create?
• is this at all “a good way” or is there a better (best practice) way?

edit: I figured a way how I can add the sayPlanet inside the Object.create:

sayPlanet: {
    value: function(){
        console.log("something different");
    }
}

However, a second question remains. Also, I would appreciate if someone can explain it in a bit deeper level if this is “a good way” to use it like this.

edit #2: As Mahavir pointed below, this is an awful example, because as it turns out you can’t (please correct me if I’m wrong) change the name of jane once it has been Object.created.

edit #3: (man oh man, this is going to get me in a certain facility where people wear white coats). As @WhiteHat pointed below, indeed you can set a name property to be updatable like this:

var jane = Object.create(female, {
    name: {
        value: 'Jane',
        writable: true
    }
});

and then you can do jane.name="Jane v2.0";.

I’ll be honest here people – I do not have a clue as to which direction to take with seemingly so many options. And just today I read Eric Elliot https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3 and now I don’t know what to think anymore because he goes on to argue that people at the ES6 aren’t quite doing it right :O. Meh, I guess I’ll have to revisit the Crockfords book yet again, decide on a “one way” and see how far it takes me.

I got quite a few answers, and I also set up a bounty since my question at first didn’t get much attention. Finally the answer by user Julien Grégoire which I accepted was this one:

Using Object.create is certainly a valid approach, but the example itself seems to me a bit misleading regarding the inner workings of Object.create. The blog post does a really good job of summarizing the different ways to create objects in javascript, but I don’t think the example for Object.create gives a good idea of how it works, which is more similar to the new/constructorapproach than it may seem.

Object.create allows to create an object based on a prototype, but without a constructor. This means that the prototype chain of the created object isn’t dependent on a constructor, (which is why it may be simpler to follow, this prototype linked via the constructor is not very straightforward or easy to follow). But Object.create still creates a prototype chain, in the same way new does.

So in your example, when you define name in human for example here:

var human = {
    name: '',

And then when you create jane:

var jane = Object.create(female, {
    name: {value: 'Jane'}

You’re not really assigning a value to the name property you defined in human. You’re in fact adding a property to jane. But human.name still is a property in prototype chain of jane. It works because javascript will follow the prototype chain to find the first matching property, but human.name is still somehow linked to jane.

See here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

Same thing happens if you use a constructor:

var Person = function(gender, name) {
     this.name = name;
}

var newPerson = new Person();

And same goes for sayPlanet function.

It’s a valid approach, but can lead to strange behaviors. For example, you could decide to modifiy sayPlanet for all humans by assigning it this way:

human.sayPlanet = function(){console.log('new sayPlanet')}

This would then work for all humans, except the ones for which you have given a sayPlanetproperty of their own. Which in your case may be the expected result. But still, you have to see if sayPlanet really should be a property of human.

With gender, it’s applied in human, and in male and female. So changing human.gender wouldn’t work on any one. But it’s still a property of human, which is a bit confusing when you want to work with these objects. You basically have a property that is defined, that is writable, but that when changed has no effect at all. It’s mainly an indication as to which property you need to add to your humans instances or somewhere in the prototype chain. Again, it seems to be used a lot, but when explained with this kind of examples, it somehow gives the impression that Object.create just combines properties, but it’s not what it does.

In the end, you need to chose if you want to work with prototypes or not. If not, then Functional inheritance is probably the best way. Then each object is different and has its own set of properties, that you can initialize, and you don’t have to worry about prototypes.

If you want to use prototypes, then you can use new/constructor or Object.create approach. But Object.create will create a prototype chain the same way new does, it just gets rid of the constructors.

A small example of how Object.create and new share some behaviors:

var human = {
    name: '',
    gender: '',
    planetOfBirth: 'Earth',
    sayGender: function () {
        console.log(this.name + ' says my gender is ' + this.gender);
    },
    sayPlanet: function () {
        console.log(this.name + ' was born on ' + this.planetOfBirth);
    }
};

var male = Object.create(human, {
    gender: {value: 'Male'}
});

var female = Object.create(human, {
    gender: {value: 'Female'}
});


var david = Object.create(male, {
    name: {value: 'David'},
    planetOfBirth: {value: 'Mars', configurable: true}
});

var jane = Object.create(female, {
    name: {value: 'Jane'},
    sayPlanet: {value: function(){
        console.log("something different");
        }, writable: true, enumerable: true, configurable: true
    }
});

var Male = function(name){ // in this case the real constructor is female or male. Name is the only property that 'needs' to be initialized
    this.name = name;
    this.planetOfBirth = 'Jupiter';
}

Male.prototype = Object.create(male);

var john = new Male('John')

david.sayGender(); // David says my gender is Male
david.sayPlanet(); // David was born on Mars

jane.sayGender(); // Jane says my gender is Female
jane.sayPlanet(); // Jane was born on Earth

john.sayGender(); // John says my gender is Female
john.sayPlanet(); // John was born on Earth


delete david.planetOfBirth; //just to show how human properties will still be in the chain even if you delete them
delete john.name; // It's true also if you use new. 
delete jane.sayPlanet;

console.log('\n','----after deleting properties----');

david.sayPlanet();
jane.sayPlanet();
john.sayGender();

human.planetOfBirth = 'Venus'; // This will apply to all humans, even the ones already created
                             
console.log('\n','----after assigning planetOfBirth on human----');

david.sayPlanet();
jane.sayPlanet();
john.sayPlanet(); // John still has planetOfBirth as its own property, since it wasn't deleted

delete john.planetOfBirth;

console.log('\n','----after deleting john planetOfBirth----');

john.sayPlanet();  // But it's still there

And in fact (just to be more confusing), some people combine Object.create with new/constructoror with Functional inheritance. Something like this for example:

https://john-dugan.com/object-oriented-javascript-pattern-comparison/#oloo-pattern

Applied to your example it would give something like this:

var human = {
    planetOfBirth: 'Earth',
    sayGender: function () {
        console.log(this.name + ' says my gender is ' + this.gender);
    },
    sayPlanet: function () {
              console.log(this.name + ' was born on ' + this.planetOfBirth); 
    },
    init: function(name){
        this.name = name;
    }
};

var male = Object.create(human, {
    gender: {value: 'Male'} // This is part of male/female prototype and can't be written, which seems logical
   });

var female = Object.create(human, {
    gender: {value: 'Female'}
});


var david = Object.create(male).init('David');
david.planetOfBirth = 'Mars';

var jane =  Object.create(female).init('Jane')
jane.sayPlanet = function(){console.log('something different')};

var john =  Object.create(male).init('John');
john.planetOfBirth = 'Jupiter';




david.sayGender(); // David says my gender is Male
david.sayPlanet(); // David was born on Mars

jane.sayGender(); // Jane says my gender is Female
jane.sayPlanet(); // Jane was born on Earth

john.sayGender(); // John says my gender is Female
john.sayPlanet(); // John was born on Earth


delete david.planetOfBirth; // Overridden properties will still exists after delete, but not the others.
delete john.name;
delete jane.sayPlanet;

console.log('\n','----after deleting properties----');

david.sayPlanet(); 
jane.sayPlanet(); 
john.sayPlanet(); 

human.planetOfBirth = 'Venus'; // This will apply to all humans, even the ones already created. 
                               // But not for humans woth overridden planetOfBirth.

console.log('\n','----after assigning planetOfBirth on human----');

david.sayPlanet();
jane.sayPlanet();
john.sayPlanet(); // John's name is now undefinded

delete john.planetOfBirth;

console.log('\n','----after deleting john planetOfBirth----');

john.sayPlanet();  //

Not necessarily better, but it works as well, and in my opinion has certain advantages.

In any case, as others said, there doesn’t seem to be a standard or default way to do this.

Also, another great answer was by a user Nice-Guy:

The best practice as I’ve learned is to define write permissions at the Object prototype level. I learned this technique from reading Addy Osmani’s JavaScript Design Patterns, it’s very reputable and open source online: http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Please check out the sayPlanet property in the example below. Keep in mind, you do not need to set all the other properties’ “writeable” to false, I only did it in my example code to illustrate the point. This approach affords more flexibility and reusability than the other, still valid, approaches. Here, you may notice that this is the Object.defineProperties syntax within the prototype.

var human = {
  name: {
    value: '',
    writable: false //only to illustrate default behavior not needed
  },
  gender: {
    value: '',
    writable: false //only to illustrate default behavior not needed
  },
  planetOfBirth: {
    value: "Earth",
    configurable: false //only to illustrate default behavior not needed
  }

};

//here we define function properties at prototype level

Object.defineProperty(human, 'sayGender', {
  value: function() {
    alert(this.name + ' says my gender is ' + this.gender);
  },
  writable: false
});

Object.defineProperty(human, 'sayPlanet', {
  value: function() {
    alert(this.name + ' was born on ' + this.planetOfBirth);
  },
  writable: true
});

//end definition of function properties

var male = Object.create(human, {
  gender: {
    value: 'Male'
  }
});

var female = Object.create(human, {
  gender: {
    value: 'Female'
  }
});

var david = Object.create(male, {
  name: {
    value: 'David'
  },
  planetOfBirth: {
    value: 'Mars'
  }
});

var jane = Object.create(female, {
  name: {
    value: 'Jane'
  }
});

//define the writable sayPlanet function for Jane
jane.sayPlanet = function() {
  alert("something different");
};

//test cases

//call say gender before attempting to ovverride
david.sayGender(); // David says my gender is Male

//attempt to override the sayGender function for david 
david.sayGender = function() {
  alert("I overrode me!")
};
//I tried and failed to change an unwritable fucntion
david.sayGender(); //David maintains that my gender is Male

david.sayPlanet(); // David was born on Mars

jane.sayGender(); // Jane says my gender is Female
jane.sayPlanet(); // something different

https://twitter.com/HitmanHR/status/653822447385505792

I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top 5 All time answerers.

I answered this question by user user5148540:

I recently used the new Set data structure specification instead of an array where I didn’t wanted any repeated values to be stored and it is working without problems, but I’m wondering I want to implement some of the new features such as let, class and const.

I’m using also the crosswalk plugin in case this is relevant.

Can anyone tell me if I should avoid ES6 for the moment or if its okay to be used?

My answer was:

I actually googled about this myself earlier today and I found this tutorial:http://labs.encoded.io/2015/06/22/use-es6-with-ionic/

StackOverflow encourages to not just use links as answers, so I’m just going to give my TL;DR, since this is not my own site and I don’t want to be held accountable for c/p.

Ionic uses Gulp, so install gulp-babel and gulp-plumber.

npm install --save-dev gulp-babel gulp-plumber

Add babel to gulpfile.js like so:

//...
var babel = require("gulp-babel");
var plumber = require("gulp-plumber");

var paths = {
  es6: ['./src/es6/*.js'],
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['babel', 'sass']);

gulp.task("babel", function () {
  return gulp.src(paths.es6)
    .pipe(plumber())
    .pipe(babel())
    .pipe(gulp.dest("www/js"));
});

//...

gulp.task('watch', function() {
  gulp.watch(paths.es6, ['babel']);
  gulp.watch(paths.sass, ['sass']);
});
//...

Edit ionic.project:

"gulpStartupTasks": [
    "babel",
    "sass",
    "watch"
 ],

For any more details consult the original link – and with this I also say thanks to the author of that blog post as it helped me too.

How to use #ECMAScript 6 features in #Ionic framework?http://t.co/kyur9xI2Dy pic.twitter.com/e2JCzStBKF

— Nikola Brežnjak (@HitmanHR) September 29, 2015

To list globally installed Node.js packages on your machine you can run the following command:

ls `npm root -g`

and it will just list globally installed packages, like for example:

drwxr-xr-x   19 nikola  staff   646 May  3 21:07 bower
drwxr-xr-x   29 nikola  staff   986 May 20 20:59 casperjs
drwxr-xr-x    9 nikola  staff   306 Feb 27  2015 compass
drwxr-xr-x   16 nikola  staff   544 Feb  6  2015 cordova
drwxr-xr-x    9 nikola  staff   306 May  1 16:50 express
drwxr-xr-x    8 nikola  staff   272 May  1 16:48 express-generator
drwxr-xr-x   12 nikola  staff   408 Dec 15  2014 forever
drwxr-xr-x   23 nikola  staff   782 Feb 27  2015 generator-angular
drwxr-xr-x    6 nikola  staff   204 Feb 27  2015 generator-gulp-angular

If, however, you use the following command:

npm list --global

it will give you the full list of other dependencies in a tree list, like for example:

├─┬ [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]
│   ├── [email protected]
│   ├─┬ [email protected]
│   │ └─┬ [email protected]
│   │   ├── [email protected]
│   │   └── [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]

List #globally installed #Node.js #packages on your machine http://t.co/vdUvLbUZe6

— Nikola Brežnjak (@HitmanHR) September 27, 2015

I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top 5 All time answerers.

I answered this question by user Florent Guenebeaud:

I would like to use Subversion with my Ionic project. What are files to be ignored in the Subversion?

My answer was:

This is the one I use with Git for Ionic (my .gitignore file):

# Specifies intentionally untracked files to ignore when using Git
# http://git-scm.com/docs/gitignore

node_modules/
platforms/
plugins/

Basically the same would apply for SVN.

Btw, if you’re looking for a decent Subversion guide, I made a presentation back in the days I was at my University: http://nikola-breznjak.com/portfolio/Subversion_en.pdf

I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top 5 All time answerers.

I answered this question by user cold_coder:

I have a website project built in Django and want to build a mobile app for it. I did a lot of research but was confused between native and hybrid app. My project is basically a Quora clone and just a college project. I also saw PhoneGap, Ionic and Sencha but I am really confused about how they all fit. Do I have to use Ionic with PhoneGap or Apache Cordova or just Ionic? What is the structure and where should I start?

My answer was:

TL;DR: Start with Ionic. Ionic uses Cordova “under the hood”. No need for PhoneGap or Sencha, so don’t be confused by that.

Disclaimer: This will sound like advertisement, so I have to say I’m in no way affiliated with Ionic, I just happen to like it so much that I’m sharing the love for it.

Let’s take this one step by step:

What is Ionic?

Ionic is a framework for building hybrid mobile apps, and it’s built on an ecosystem that includes Angular as the web application framework and uses Cordova for the building and packaging of the native app. Ionic creates a native mobile app that can be installed via the app stores, and contains what is called a WebView (essentially an isolated browser window) with a JavaScript API inside which the web application will run.

What is hybrid mobile app?

If you’re a web developer, you have a decent knowledge of HTML, CSS and JavaScript. Also, you’re most likely using one of the ever so slightly popular frameworks these days like AngularJS. Up until fairly recently if you wanted to make an app for (currently) two most popular mobile operating systems iOS and Android your only bet was to make the so-called native applications using the SDKs of the intended platform itself. This, of course, meant that you needed to make two versions of your application – both for iOS and Android. If you are a solo developer chances that you’re proficient in both are not so high.

Nowadays, luckily, with the Ionic Framework you can create one application by using the skills you already have as a web developer and then deploy this one codebase as an app to both iOS and Android stores. How cool is that, right? So, hybrid because it’s a “simple” web app wrapped inside the native app with a so-called WebView.

Why is Ionic cool?

Ionic is awesome because it’s not “just” a framework. Instead, it has a whole ecosystem built around it. For example, Ionic allows you to:

• generate icons and splash screens for all devices and device sizes with a single command: ionic resources. This alone saves you at least a day of image preparing for various sizes.
• instantly update your apps with code changes, even when running directly on your device with ionic run --livereload
• build and test iOS and Android versions side-by-side and see changes instantly with ionic serve --lab
• share your Ionic apps with clients, customers, and testers all around the world without ever going through the App Store with ionic share
• easily accessing the full native functionality of the device using ngCordova (here you get to use any Cordova plugin – so Ionic is indeed much more than Cordova per se)
• Also, they’re (Ionic team) building a full-stack backend services and tools for your Ionic app likeDeploy (for deploying a new version without going through Apple review process!), Analytics,Push notifications.
• Ionic CLI (command line interface) uses Cordova in the backend and allows you to build (directly using Ionic CLI) apps for iOS and Android (you by doing ionic build ios or ionic build android and woila)
• Ionic uses Angular as a frontend framework so if you’re familiar with it it will come as a bonus. They’re working closely with the Angular 2.0 team too.

How to start your project?

If you take a look at my answer to this question you’ll see that if you already have an API defined in your Django backend, then you can start using it quite quickly by leveraging the existing API and consuming it with Angular $resource.

Hope this helps and that you find using Ionic a pleasure.

I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #5 All time answerer.

I answered this question by user user_4337270:

I am using Ionic framework for my project. As per ionic build I have used the build command for windows:

ionic build windows

After the build I get the file structure as below:

The issue is I’m not able to figure out were do I get the .XAP file inside the platform/windows folder and I’m completely new on Windows build.

My answer was:

I’m just posting this as an answer, to which we came in the comments under the OP’s question:

Add the windows phone platform: ionic platform add wp8.

Build for wp8: ionic build wp8.

The file CordovaAppProj_Debug_AnyCPU.xap is the one you’re looking for.

However, I would like to turn your attention to these few posts:

• http://blog.vjrantal.net/2015/01/08/experiences-with-ionic-on-windows-phone-8-1/
• http://blogs.msdn.com/b/msdn_answers/archive/2015/02/10/running-cordova-apps-on-windows-and-windows-phone-8-1-using-ionic-angularjs-and-other-frameworks.aspx
• http://appfoundry.be/blog/2014/10/16/ionic-windows-phone

which basically confirm what the official Ionic team says that the platforms wp8 and windows in general are not yet fully supported; but they hope they soon will be.

Where to get .xap file in #Windows using #ionic build? http://t.co/PtsGU7AP8d

— Nikola Brežnjak (@HitmanHR) September 8, 2015

I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #5 All time answerer.

I answered this question by user Umer Khalid:

I am using Ionic Creator for developing an application. While trying to add select (dropdown) I could not see any way to enter options for the dropdown?

My answer was:

Simple, but not liked, answer: you can’t do it by drag&drop.

If you take a look at the source you get when you download from Ionic Creator, you will see it creates “just” the select element:

<select></select>

So, you could “kind of fake it”, by drag&dropping the HTML element inside the form element and putting the following code inside:

<label class="item item-select" name="myselect">
    <span class="input-label">Input</span>
    <select>

        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</label>

I don’t know if in future guys from Ionic will add this. It would be probably worth it if you request it as a feature over at their (very active) forum: http://forum.ionicframework.com/

I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #5 All time answerer.

I answered this question by user Qweick:

I’ve been fiddling with ionic, but I’ve ran into an issue. If I make a new project with a sidebar, upon navigation to a child state sidebar button disappears and is replaced with a back button. How can I retain sidebar button on every state./page?

My answer was:

On every state/page you should add the following <ion-nav-buttons>, just inside the <ion-view>and before the <ion-content>:

<ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>

So, a full simple example would look something like this:

<ion-view view-title="Some title">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
    </ion-nav-buttons>

    <ion-content>
        Some content
    </ion-content>
</ion-view>

This would add the “hamburger” icon to your navigation, along with the back button.

Ionic publically announced Ionic Market on their blog.

On the market (http://market.ionic.io/) you can buy (and even sell):

• project starters (Firebase, Parse, Heroku, etc…)
• plugins (swipable cards, timepickers, maps, etc…)
• themes (material design, tumblr alike, etc…)

There are even some free ones available at the moment, so you may want to check that out.

Since other markets emerged and you could have found similar items on sites like themeforrest, it comes as a nice and warm surprise that the Ionic team basically said they approve that:

We also want to help the markets that have popped up naturally, rather than compete with them.

Additionally, a statement that reimburses that is:

In addition to being able to sell your wares directly on the Ionic Market site, you can also link externally to your existing marketplace, where users can purchase your add-on on the site where you’re already selling it. This effectively makes the Ionic Market just another way to help developers find your add-on.

I bet this announcement made the authors very happy. Even more so, when they realize that Ionic Market takes no commission:

Because we wanted to encourage the creation of a vibrant ecosystem of Ionic add-ons that will mature over time, we’re not taking a cut on any sales. You can sell your add-ons directly on the Ionic Market through Stripe, so the only fees are the taxes and fees Stripe collects. Connect your Stripe account to the Market, and all funds after taxes and credit card processing fees go directly to you!

This, my dear friends, is just getting better and better with every new announcement they make!

TL;DR

In this tutorial, I’m going to quickly show you how to get network information change with Ionic framework. What do I mean by network information change? Well, if you need to detect when your phone gets on the Internet, or loses connection, you can do so with this example code. Additionally, you can get the type of the network your phone is connected to (WIFI for example).

Finished project

You can clone the finished project from Github: https://github.com/Hitman666/IonicNetworkInfo, and you can see how it actually looks like on the image below (nothing fancy, this is a test project after all ;)):

Step by step on how to make this yourself

Here are the quick steps in recreating the exact same app:

1. Start a new Ionic project by doing:

   ionic start IonicNetworkInfo blank
   

2. Then, change the directory to the newly created IonicNetworkInfo:

   cd IonicNetworkInfo

3. Install ngCordova with Bower:

   bower install ngCordova

   If by some chance you don’t have bower installed, you can install it with npm:

   npm install bower -g

4. Open up the www/index.html file in your favorite editor, and add the reference to ngCordova (just above the cordova.js script):

   <!-- This is what you should add, the cordova below you'll already have -->
   <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
   
   <!-- cordova script (this will be a 404 during development) -->
   <script src="cordova.js"></script>

5. Install the ngCordova network plugin by executing the following command in your Terminal/Command prompt (you should do this from the root directory of your app; so, in our case the IonicNetworkInfo directory):

   cordova plugin add org.apache.cordova.network-information

   To check if you have successfully installed the plugin, you can run the following command (from the root directory – I won’t be repeating this anymore; when I say you should run some command from the Terminal/Command prompt that, in this case, means from the root directory of the application):

   cordova plugin list

   You should see the following output:

   > cordova plugin list                                                                                                                           
   com.ionic.keyboard 1.0.4 "Keyboard"
   org.apache.cordova.network-information 0.2.15 "Network Information"

6. Open up the www/js/app.js file and add ngCordova to the dependencies list, so that basically the first line looks like this:

   angular.module('starter', ['ionic', 'ngCordova'])

7. Create a new controller in the www/js/app.js file called MyCtrl, with the following content:

   .controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
       document.addEventListener("deviceready", function () {
   
           $scope.network = $cordovaNetwork.getNetwork();
           $scope.isOnline = $cordovaNetwork.isOnline();
           $scope.$apply();
           
           // listen for Online event
           $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
               $scope.isOnline = true;
               $scope.network = $cordovaNetwork.getNetwork();
               
               $scope.$apply();
           })
   
           // listen for Offline event
           $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
               console.log("got offline");
               $scope.isOnline = false;
               $scope.network = $cordovaNetwork.getNetwork();
               
               $scope.$apply();
           })
   
     }, false);
   })

   In this controller you attach an event listener on the deviceready event (because it could be that the device would not have been yet initialized when this code runs) and you get the network information with:

   $cordovaNetwork.getNetwork();

   The information, about weather you’re connected to the internet is obtained with the following line:

   $scope.isOnline = $cordovaNetwork.isOnline();

   Then, you register two events $cordovaNetwork:online and $cordovaNetwork:online which trigger when the device gets online/offline. In them you then just update the $scope variables ().

   Just for reference, the whole content of the www/js/app.js file should be:

   // Ionic Starter App
   
   // angular.module is a global place for creating, registering and retrieving Angular modules
   // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
   // the 2nd parameter is an array of 'requires'
   angular.module('starter', ['ionic', 'ngCordova'])
   
   .run(function($ionicPlatform, $cordovaNetwork, $rootScope) {
     $ionicPlatform.ready(function() {
       // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
       // for form inputs)
       if(window.cordova && window.cordova.plugins.Keyboard) {
         cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
       }
       if(window.StatusBar) {
         StatusBar.styleDefault();
       }
   
     });
   })
   
   .controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
       document.addEventListener("deviceready", function () {
   
           $scope.network = $cordovaNetwork.getNetwork();
           $scope.isOnline = $cordovaNetwork.isOnline();
           $scope.$apply();
           
           // listen for Online event
           $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
               $scope.isOnline = true;
               $scope.network = $cordovaNetwork.getNetwork();
               
               $scope.$apply();
           })
   
           // listen for Offline event
           $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
               console.log("got offline");
               $scope.isOnline = false;
               $scope.network = $cordovaNetwork.getNetwork();
               
               $scope.$apply();
           })
   
     }, false);
   });

8. In the index.html file, inside the ion-content tag paste the following content:

   <div class="card">
                   <div class="item item-text-wrap">
                       <h1>Network: {{network}}</h1>
                   </div>
               </div>
   
   
               <div class="card">
                   <div class="item item-text-wrap">
                       <ion-toggle ng-model="isOnline" ng-checked="item.checked">
                           <h1 ng-show="isOnline">I'm online</h1>
                           <h1 ng-show="! isOnline">I'm offline</h1>
                       </ion-toggle>
                   </div>
               </div>

   Basically what we do here is we show the contents of the network variable (which is attached to the $scope via the controller). Also, by using the ion-toggle component we show the “I’m online” / “I’m offline” notifications.

   Just for reference, the content of the whole index.html file should look like this:

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
       <title></title>
   
       <link href="lib/ionic/css/ionic.css" rel="stylesheet">
       <link href="css/style.css" rel="stylesheet">
   
       <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
       <link href="css/ionic.app.css" rel="stylesheet">
       -->
   
       <!-- ionic/angularjs js -->
       <script src="lib/ionic/js/ionic.bundle.js"></script>
   
       <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
       <!-- cordova script (this will be a 404 during development) -->
       <script src="cordova.js"></script>
   
       <!-- your app's js -->
       <script src="js/app.js"></script>
   </head>
   <body ng-app="starter" ng-controller="MyCtrl">
   
       <ion-pane>
           <ion-header-bar class="bar-stable">
               <h1 class="title">Ionic Blank Starter</h1>
           </ion-header-bar>
         
           <ion-content padding="true">
               <div class="card">
                   <div class="item item-text-wrap">
                       <h1>Network: {{network}}</h1>
                   </div>
               </div>
   
   
               <div class="card">
                   <div class="item item-text-wrap">
                       <ion-toggle ng-model="isOnline" ng-checked="item.checked">
                           <h1 ng-show="isOnline">I'm online</h1>
                           <h1 ng-show="! isOnline">I'm offline</h1>
                       </ion-toggle>
                   </div>
               </div>
   
           </ion-content>
       </ion-pane>
   </body>
   </html>

Testing time

In order to test this application you should run it on your device (because you can’t disable network in iOS simulator).

First, in case you haven’t, add the desired platform (execute this command from the root of the directory). For iOs execute:

ionic platform add ios

Or, for Android execute:

ionic platform add android

Just a quick note – in order to build the app for iOs, you need to be running this on Mac machine (sure, there are ways around it, but TBH, I’m not a fan of them). As for Android, you can normally run it on your Windows machine (if, of course you have all the SDKs in place. I’ll write about setting these up in another tutorial, so will update the link here when the post will be published, for those who want to see this kind of information).

If you have an Android device plugged to your computer (and all the SDKs in place) you can run the following to commands to get your application running on your Android device:

ionic build android && ionic run android

To get this application running on your iOS device, you first have to build the application, and you can do this by executing the following command:

ionic build ios

Now, open up the IonicNetworkInfo/platforms/ios folder and you should see the following content:

Next, open up IonicNetworkInfo.xcodeproj file with Xcode:

Make sure that your iOS device is connected to your Mac computer, select it from the dropdown menu and click run:

Now, experiment with the application by turning your WIFI on/of, turning your Cellular network (if you have it) on/off, and basically enjoy seing the information chage automatically :). Surely, you can do way more advanced stuff based on this simple example, but I hope this will get you started…

That’s all folks, I hope this will prove to be useful to someone. If you have any questions, or you’ve noticed some blatant blunder that I may have made, please don’t hesitate to share it in the comments, I’ll make sure to reply promptly.