edit: the old link is not working anymore and all four posts have now been merged into one huge post: Ionic Framework: A definitive 10,000 word guide.

In my second tutorial about Ionic framework for Pluralsight, I’m going to show you how to create a calculator application with Ionic framework by using Ionic Creator for UI.

The post is live and you can access it for free here: How to create a calculator application with Ionic framework by using Ionic Creator for UI.

The first tutorial, as you may remember, was all about how to get started with Ionic framework on Mac andWindows. This will be a series of posts which will teach you how to take advantage of your web development knowledge in building hybrid applications for iOS and Android.

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

How to create a #calculator application with #Ionic #framework by using Ionic #Creator for UI https://t.co/A7wCaKOunX

— Nikola Brežnjak (@HitmanHR) December 1, 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 All time answerers list.

I actually asked this question myself:

I was following the official (and rather great) docs over at Ionic for how to get started with push notifications.

However, once the instructions said to install the phonegap-plugin-push plugin, I received the following error:

nikola@Nikolas-Mini ~/Desktop/ionicTesting/ionicPush
> ionic plugin add phonegap-plugin-push
Error: 404 Not Found: phonegap-plugin-push
at RegClient.<anonymous> (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:304:14)
at Request._callback (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:246:65)
at Request.self.callback (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/npm/node_modules/request/request.js:236:22)
at Request.emit (events.js:110:17)
at Request.<anonymous> (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/npm/node_modules/request/request.js:1142:14)
at Request.emit (events.js:129:20)
at IncomingMessage.<anonymous> (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/node_modules/npm/node_modules/request/request.js:1096:12)
at IncomingMessage.emit (events.js:129:20)
at _stream_readable.js:908:16
at process._tickCallback (node.js:355:11)

Anyone has an idea of why? I tried with cordova instead ionic but I get the same error.

Also, I managed to find the answer myself:

After quite some searching I stumbled upon an official blog post, Cordova is moving their plugins to npm.

So, finally, I installed it easily now with npm:

npm install phonegap-plugin-push

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

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 All time answerers list.

I actually asked this question myself:

I have a simple Firebase Facebook OAuth login set like below by following the official tutorial for the Ionic Firebase Facebook login.

The problem is that once I click on the login with Facebook button, I get redirected to Facebook, I log in, and I get redirected back to my app. However, the problem is that I stay in the login page. Strange thing is that if I physically refresh my browser (testing with ionic serve) by pressing F5 the onAuth triggers and I get redirected to the Items page. If I don’t refresh the browser, onAuthdoesn’t get called.

Did someone have this issue? How did you solve it?

Please note that yes, I did my research (and am slightly starting to lose it), but can’t get it to work. I searched SO, tried with $timeout from google groups, tried to call $scope.$apply(), but all to no avail – so please help me figure out where I’m doing it wrong?

.controller('AppCtrl', function($scope, Items, Auth, $state, $ionicHistory) {
    $scope.login = function(provider) {
        Auth.$authWithOAuthRedirect(provider).then(function(authData) {

        }).catch(function(error) {
            if (error.code === "TRANSPORT_UNAVAILABLE") {
                Auth.$authWithOAuthPopup(provider).then(function(authData) {
                    
                });
            } else {
                console.log(error);
            }
        });
    };

    $scope.logout = function() {
        Auth.$unauth();
        $scope.authData = null;

        $window.location.reload(true);
    };

    Auth.$onAuth(function(authData) {
        if (authData === null) {
            console.log("Not logged in yet");
            $state.go('app.login');
        } else {
            console.log("Logged in as", authData.uid);
            
            $ionicHistory.nextViewOptions({
                disableBack: true
              });
            $state.go('app.items');
        }
        $scope.authData = authData; // This will display the user's name in our view
    });
})

<ion-view view-title="Members area">
    <ion-content padding="true">
        <div ng-if="!authData">
            <button class="button button-positive button-block" ng-click="login('facebook')">Log In with Facebook</button>  
        </div>       
        
        <div ng-if="authData.facebook">
            <div class="card">
                <div class="item item-text-wrap">Hello {{authData.facebook.displayName}}!</div>                
            </div>

            <button class="button button-assertive button-block" ng-click="logout()">Log out</button>
        </div>        

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

$timeout(function(){
    Auth.$onAuth(function(authData) {
        if (authData === null) {
            console.log("Not logged in yet");
            $state.go('app.login');
        } else {
            console.log("Logged in as", authData.uid);

            $ionicHistory.nextViewOptions({
                disableBack: true
              });
            $state.go('app.items');
        }
        $scope.authData = authData; // This will display the user's name in our view
    });
}, 3000);

Posted on the github issues, but will reply here as well.

This only happens in the browser using $authWithOAuthRedirect. The example was intended for cordova apps, so this really shouldn’t be an issue.

But if you really need it, you could just skip the redirect and use a popup.

Auth.$authWithOAuthPopup(authMethod).then(function(authData) {
      console.dir(authData);
    });

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

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 All time answerers list.

I actually asked this question myself:

Since I basically can get the same info with both approaches, I’m wondering which is the preferred one and what are the advantages using one over the other?

Answer, from user Mudasser Ajaz, was:

$cordovaGeolocation is angular wrapper over plain javascript plugin, developed by ionic. Now question is why ngCordova was introduced,in simple words to deal it as plugin service as module and inject plugin wrapper as dependency to only particular controller or service.
On Pratical level, cordova developers were having issues with plugins on angular project. One simple issue was that $scope does not get updated sometimes in simple plugins callback.
Quoting from ionic blog post :

The services support promises to make it easier to deal with their asynchronous nature and ensure scope data is properly updated

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

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 All time answerers list.

I actually asked this question myself:

What I would like to achieve is this:

Surely, I went through the button documentation, but it seems nothing similar is there. So, I would appreciate some pointing in the right direction (codepen with a basic example would be most awesome).

So, ideally, this would be one button tag where I would be able to pass two variables (one which would appear on the left and one on the right). This does smell like a job for a Angular directive, though I haven’t fiddled with it too much just yet so a friendly nudge in the right direction would be appreciated.

Answer from Malek Hijazi was pointing out to use the ButtonBar component, but I already knew about it and it wasn’t what I needed. Finally, I managed to answer this question myself after some fiddling with it:

What I ended up doing in the end was this: I created a div with a class button and then inside it I created additional two div‘s with custom classes.

How this looks like on CodePen:

And, the code below:

.leftButtonSide {
    width: 50%;
    float: left;
    color: #000;
}

.rightButtonSide {
    width: 50%;
    float: left;
    background: #F2F2F2;
    color: #000;
    border-radius: 2px;
}

<div ng-repeat="d in data" class="button button-positive-outline">
    <div class="leftButtonSide">2</div>
    <div class="rightButtonSide">2,00</div>
</div>

True, for the exact same look you would have to play a bit with CSS. I ended up with this in the end:

Hope this helps someone too!

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

I haven’t posted in three weeks now, but there’s a good reason for it – I was preparing a post for Pluralsight on the topic of Ionic. This will be a series of posts which will teach you how to take advantage of your web development knowledge in building hybrid applications for iOS and Android.

I’m super excited that the first  post is now live (I have additional 3 in the queue) and you can check it out here: How to get started with Ionic framework on Mac and Windows.

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

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 All time answerers list.

I answered this question by userChris Lawrence:

I think I know the answer to this question already but thought I would throw it out there incase there was a workaround….

Just built a ionic app with ngcordova, which works fine and I have tested on my android device and deployed to playstore.

Just in the process of deploying to the apple app store. I currently don’t have an apple ios physical device to test the cordova plugins.

I am using sms, camera and local notification. These as far as am aware cannot be tested in the ios simulator in xcode.

Don’t really want to spend £400 on a tablet to test one app.. any one had the same problem and found a means of testing?

My answer was:

You can test plugins in iOS simulator.

edit: I just stumbled upon the official documentation where it states that even with Ionic View you can test these plugins:

• com.brodysoft.sqlitePlugin 1.0.3 “Brodysoft SQLitePlugin”
• com.ionic.keyboard 1.0.3 “Keyboard”
• com.phonegap.plugins.barcodescanner 1.1.0 “BarcodeScanner”
• org.apache.cordova.battery-status 0.2.12 “Battery”
• org.apache.cordova.camera 0.3.4 “Camera”
• org.apache.cordova.console 0.2.12 “Console”
• org.apache.cordova.device 0.2.13 “Device”
• org.apache.cordova.device-motion 0.2.11 “Device Motion”
• org.apache.cordova.device-orientation 0.3.10 “Device Orientation”
• org.apache.cordova.dialogs 0.2.11 “Notification”
• org.apache.cordova.geolocation 0.3.11 “Geolocation”
• org.apache.cordova.globalization 0.3.3 “Globalization”
• org.apache.cordova.network-information 0.2.14 “Network Information”
• org.apache.cordova.vibration 0.3.12 “Vibration”
• org.chromium.zip 1.0.0 “Zip”

How to test #Cordova plugins in #Ionic without a device? https://t.co/IpyYNV4uAn

— Nikola Brežnjak (@HitmanHR) October 20, 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 answered this question by user user5148540:

npm install -g cordova

npm ERR! Failed to parse json
npm Unexpected token '\u0000' at 1:1
npm ERR!
npm ERR! ^
npm ERR! File: c:\Users\Bruce\AppData\Roaming\npm-cache\amdefine\1.0.0\package\package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! This is not a bug in npm
npm ERR! Tell the package author to fix their package.json file. JSON.parse.

My answer was:

 Via this question on SO it could be that you just have to do:

npm cache clean

But, also try the other methods suggested there like adding the registry option:

npm install <packagename> --registry http://registry.npmjs.org/

Or, if you’ve been mingling with the package.json file by yourself, check if it’s valid.

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

As the official blog post nicely states

mobile just changed forever

How come? Well, as the post says

Google started indexing iOS 9 apps that support the HTTP deep link standards, allowing users to find and open app content through the standard Google search in Safari on iOS and Google on Android.

What this means is that even more businesses will want to have their app. Why? Well, for the same reasons why they created websites. One of our professors at university used to joke:

if it’s not on the web, it doesn’t exist

Anyways, that’s why I think Ionic is going to become the mainstream goto place for making apps, and making them quick.

As the author of that posts says:

Ionic is planning to become WordPress for apps

So, dear fellow developers – it’s time to dive into the app business. And, if you still haven’t got a clue where to start – Ionic is a great place, especially if you have web development skills.

#Ionic is #wordpress for #mobile #apps http://t.co/5E5bhCtaXD

— Nikola Brežnjak (@HitmanHR) October 14, 2015

As just announced on the official blog post IonicPackage now lets you build an iOS app for distribution on Windows machine.

This indeed is a huge news. However, don’t think you won’t have to buy a Mac (or make your own Hackintosh or buy Mac in cloud or similar mumbo jumbo) to build an app for iOS. Well, at least for now you still have to set the certificate and provisioning profile for iOS builds (and you can do that only on a Mac).

Anyways, during the open alpha period, Ionic Package will be 100% free to use, and later they promised to have a free dev package as well.

In order to try this out first update your Ionic CLI to the newest version:

npm install -g ionic

Then, when you’re done with your app, you have to make sure that you uploaded it to Ionic with:

ionic upload

Build for Android

If you want to build for Android it execute:

ionic package build android

The output of the command looks something like this:

> ionic package build android --profile dev                                
[=============================]  100%  0.0s
Preparing your resources...
Uploading your resources to Ionic...
Submitting your app to Ionic Package...
Your app has been successfully submitted to Ionic Package!
Build ID: 1
We are now packaging your app.

To check the status of the packaging execute:

ionic package list

You should see something similar to this output:

> ionic package list                                                       

  id │ status  │ platform │ mode  │ started
─────┼─────────┼──────────┼───────┼────────────────────────
  1  │ SUCCESS │ android  │ debug │ Oct 14th, 2015 21:20:33

Showing 1 of your latest builds.

If the status shows SUCCESS then you can finally download the build by executing:

ionic package download BUILD_ID

Where, of course you would enter your own BUILD_ID number. In my case the command would be:

ionic package download 1

The output of the command shows where the .apk file has been downloaded:

> ionic package download 1                                                 
Downloading... [=============================]  100%  0.0s

Wrote: /Users/nikola/Desktop/ionicTesting/ionicPackageTest/ionicPackageTest.apk
 ✓ Done!

You can learn more about how to use the Ionic Android build tools from official documentation.

Build for iOS

The process is basically the same as for Android, with the added prerequisite of creating certificate and provisioning profile. You can learn more about how to use the Ionic iOS build tools from official documentation.

Build an #app for distribution with #Ionic Package http://t.co/TOfW7ofZXR

— Nikola Brežnjak (@HitmanHR) October 14, 2015