Ionic Studio looks exciting (I hope it will be free)

The Ionic team has just dropped a bomb in my inbox. The bomb even has a name – Ionic Studio. Still in preview, Studio is Ionic’s official integrated development environment (IDE). I believe they have done a fantastic job by concentrating on the thing that’s their defining feature — UI Components. Of course, things like managing plugins, resources and all from GUI make life easy. But by making it easier to create beautiful interfaces they have done something really good.

Those with some experience with building Ionic apps already know about Ionic Creator. But they also know that the tool is screaming to be updated since long, and is not entirely bug-free. Something like Ionic Studio will really make it easy to create apps quickly.

I like the clean looks it sports. It seems to have been built on the proven and trusty VS Code / Electron platform. Perhaps you have other ideas about its base?

The Problem of Run-Once Controllers in Ionic

Ionic is based on Angular. Angular has views and controllers. A view’s controller is supposed to execute each time the view is opened or navigated to. In Ionic, that doesn’t happen.

Take for instance this setup: you’re building a social app that has a Login view. You’ve configured the routes such that the Home view is set to open by default. Each time the app is loaded from scratch: (i) Home view opens, (ii) login session check is performed, and (iii) user is redirected to Login view if session has expired.

Now because Home view has loaded once and its controller executed alongside, the following piece of code will NOT execute again once login is successful on Login view and user is redirected back to Home view, perhaps through $state.go.

.controller('HomeController', function ($scope) {
 
    // Read username from local storage
    $scope.userEmail = window.localStorage['app.user.email'];
 
});

So if the value stored in local storage was an empty string when HomeController ran, $scope.userEmail would still be empty string even after LoginController has updated the local storage value.

Until this very moment, I didn’t have a damning clue to this apparently illogical problem. My searches for angular controller runs only once, angular $state.go controller doesn't execute, and so on naturally went fruitless because I wasn’t searching it right! Apparently, people were not facing the same problem.

A developer on stackoverflow reported that an NG controller should actually run each time its view loads. On the same stackoverflow question, I found my answer.

As per Ionic’s official docs on ion-view:

Views are cached to improve performance. Views can be cached, which means controllers normally only load once, which may affect your controller logic. To know when a view has entered or left, events have been added that are emitted from the view’s scope.

So the problem of run-once controllers is very Ionic specific. And so is the solution. The way to go about the problem is to move your code, that’s supposed to be executed each time a view is shown, from the root of your controller to the view’s $ionicView.enter event handler.

.controller('HomeController', function ($scope) {
 
    $scope.$on('$ionicView.enter', function () {
        // All code in this function will execute each time Home view is shown
        $scope.userEmail = window.localStorage['app.user.email'];
    });
 
});

That’s it!