This page was first published on December 31th 2013 and was last updated on January 4th 2014. See the update below.

It’s not complicated to create tabs with custom templates in angular but I had to research a bit so maybe you won’t have to.

We will use ngSwitch directive to check the activeTab variable and ngInclude to load the right template. In earlier versions of angular it was a bit simpler to do this because we were able to use the same tag for ng-switch-when and ng-include but it’s not the case since 1.2 RC3. You can read the explanation here.

<ul>
    <li class="pure-button"
        ng-class="{'pure-button-active': activeTab === 'signup'}"
        ng-click="activeTab = 'signup'">
        Sign Up
    </li>
    <li class="pure-button"
        ng-class="{'pure-button-active': activeTab === 'login'}"
        ng-click="activeTab = 'login'">
        Log in
    </li>
</ul>
<div class="tab-content">
    <div ng-switch="activeTab">
        <div ng-switch-when="signup">
            <div ng-include="'partials/signup.html'"></div>
        </div>
        <div ng-switch-when="login">
            <div ng-include="'partials/login-box.html'"></div>
        </div>
    </div>
</div>

Of course we will need a default value for activeTab so we set it in the controller.

angular.module('frontendApp.controllers', []).
  controller('LoginSignUpCtrl', ['$scope', function($scope) {
      $scope.activeTab = 'login';
}]);

Angular is pretty smart here, it loads only the default tab and if you reopen an already visited tab it won’t download the template again.

Update (04 Jan 2014): The solution above works until we don’t want to do other operations when a user switch to another tab. I modified the original code which turned out to be more readable.

 <ul>
    <li class="pure-button"
        ng-class="{'pure-button-active': activeTab === 'signup'}"
        ng-click="switchTabTo('signup')">
        Sign Up
    </li>
    <li class="pure-button"
        ng-class="{'pure-button-active': activeTab === 'login'}"
        ng-click="switchTabTo('login')">
        Log in
    </li>
</ul>
<div class="tab-content">
    <div ng-include="tabTemplates[activeTab]">
</div>

angular.module('frontendApp.controllers', []).
  controller('LoginSignUpCtrl', ['$scope', function($scope) {
      $scope.activeTab = 'login';
      $scope.tabTemplates = {
        login: 'partials/login-box.html',
        signup: 'partials/signup.html'
      };

      $scope.switchTabTo = function (tabId) {
        $scope.activeTab = tabId;
        /* other stuff to do */
      };
}]);

In the last couple of days I played with OpenShift, a PaaS made by RedHat. I moved one of my ruby application from VPS to there. As you may know, OpenShift is working from git repositories so a push means build and deploy.

That means (almost¹) everything has to be pushed to the repository. We know that to commit passwords and secret keys is a bad idea. But don’t worry, use OpenShift’s environment variables! :)</div>

The nice thing is, you can easily insert these variables into yml files, so your database config can be look like this:

production:
  adapter: mysql2
  database: <%= ENV['OPENSHIFT_APP_NAME'] %>
  host: <%= ENV['OPENSHIFT_MYSQL_DB_HOST'] %>
  port: <%= ENV['OPENSHIFT_MYSQL_DB_PORT'] %>
  username: <%= ENV['OPENSHIFT_MYSQL_DB_USERNAME'] %>
  password: <%= ENV['OPENSHIFT_MYSQL_DB_PASSWORD'] %>
  socket: <%= ENV['OPENSHIFT_MYSQL_DB_SOCKET'] %>
  encoding: utf8
  pool: 5

What about custom secrets and keys?

Well, you can set custom environment variables with rhc. I made a simple text file with my variables:

DROPBOX_APP_KEY=...
DROPBOX_APP_SECRET=...

Then add them with set-env command:

$ rhc set-env my/dir/openshift-env-vars -a myappname

Of course you shouldn’t commit this file to any repository.

You can test it with rhc:

$ rhc ssh -a myappname
$ env | grep DROPBOX

If you were connected to ssh while adding the variables, you should reconnect or check them from irb.