edit: These posts don’t exists in their separate form anymore. Instead, they have been merged into one big post that you can read here. But, in case you want to read them in its original form, make sure to check the book linked below.

The fourth post about Ionic framework for Pluralsight wraps the series in a whole where we showed how to create an application starting with an idea, through creating a prototype and implementing the application using Ionic framework to finally (in this tutorial) publishing it in the stores.

You can see the finished product on the header image and you can check out the application by downloading it from the App Store or Play Store here.

The post is live and you can access it for free here:  How to publish our calculator application to the Apple’s App Store and Google’s Play Store.

This was a series of posts which was intended to teach you how to take advantage of your web development knowledge in building hybrid applications for iOS and Android.

The first tutorial, as you may remember, was all about how to get started with Ionic framework on Mac andWindows. The second tutorial was about how to create a calculator application with Ionic framework by using Ionic Creator for UI. The third tutorial was about how to polish, create icons and splash screen images, add ads, share and test our calculator application.

If by some chance you would like to download a PDF version of these 4 posts you can do so via Leanpub. Yes, you can choose zero as the amount and I promise I won’t take it against you 😉

If you have any questions please don’t hesitate to ask, and please share if you like it.

How to #publish the #app to the Apple's App Store and Google's Play Store https://t.co/DkFBeTj8yi @ionicframework pic.twitter.com/SjROTSn5OO

— Nikola Brežnjak (@HitmanHR) December 15, 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.

I asked this question myself:

We’re having an argument, which I hope you guys will help resolve.

Say I have a simple factory defined like this:

angular.module('myModule', [])

.factory('Fact', function() {
    var Fact = function() {
        var that = {};

        that.var1 = [];
        that.var2 = [];

        return that;
    };

    var fact = {
        get: function() {
            return Fact();
        }
    };

    return fact;
});

I found out that this code will be working if I write it like this:

angular.module('myModule', [])

.factory('Fact', function() {
    var fact = {
        get: function() {
            return Fact();
        }
    };

    return fact;
});


var Fact = function() {
    var that = {};

    that.var1 = [];
    that.var2 = [];

    return that;
};

Namely, I can take this code of the object Fact and put it in some other plain .js file, include it before the Angular one (in index.html file) and this “would work”.

However, I’m trying to resolve an argument that this approach is not good (well, not an Angular approach at that) because then this Fact is “laying around on the global scope”, which is not good.

In which circumstances would you say that this is/isn’t a good solution?

Is there a way to include a “nonAngular” code (simple JavaScript code written in some .js file) into the Angular factory?

I accepted the answer from user Dan Prince:

Between factories, services, providers, constants and values, there’s not really a good reason to have any code outside of Angular’s constructs unless it’s third party code.

If it is, you won’t have control over the way that the library, framework, etc registers itself. It might use the global scope, alternatively, it might provide a module export.

Where possible, the cleanest and safest way to include third party code inside Angular is with a build-step using a module bundler.

For instance, I want to use the hypothetical package foojs from inside Angular using browserify:

Install the package with npm

npm install --save foojs

Then use it like this.

var foojs = require('foojs');

var app = angular.app('myapp')

app.service('myservice', function() {
  // here we can use foojs safely
});

You can also achieve similar things with WebPack.

The reason this is safer is because after the build step, all the modules will be wrapped inside a function that protects the global scope.

If you aren’t able to use a module bundler, then the only option is to use the global scope and allow the third party code to bind onto the window object.

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