Oskar4j 2014-09-11 kl. 07.53.15

Add Authorization header to AngularJS $http

I recently had to add an Authorization header to all $http requests in an AngularJS app.
Here’s how I did it in Coffeescript.


.factory 'AuthDataService', [
  (localStorageService, $base64, $http) ->
    current_auth_data = localStorageService.get('authorization_token')
    if current_auth_data
      $http.defaults.headers.common['Authorization'] = "Basic #{current_auth_data}"

    return {
      setAuthData: (authdata) ->
        return unless authdata
        encoded = $base64.encode(authdata)
        localStorageService.set('authorization_token', encoded)
        $http.defaults.headers.common['Authorization'] = "Basic #{encoded}"
      clearAuthData: ->
        $http.defaults.headers.common['Authorization'] = ''
      getAuthData: ->
        return localStorageService.get('authorization_token')

Upon initialization it checks if there’s a authorization_token saved in your local storage. If there is, set it as a Authorization header on $http.
Whenever you set or clear the auth data, the header for $http changes as well.

Oskar4j 2014-09-23 kl. 22.02.20

Create a nested array recursively in CoffeeScript

In an old post called Create a nested array recursively in Javascript I wrote how to go from

    {id: 1, title: 'hello', parent: 0},
    {id: 2, title: 'hello', parent: 0},
    {id: 3, title: 'hello', parent: 1},
    {id: 4, title: 'hello', parent: 3},
    {id: 5, title: 'hello', parent: 4},
    {id: 6, title: 'hello', parent: 4},
    {id: 7, title: 'hello', parent: 3},
    {id: 8, title: 'hello', parent: 2}

Read more…

Oskar4j 2014-09-11 kl. 07.53.15

AngularJS: $watch and $timeout

As you might know, AngularJS has an event loop, called $digest, that checks and updates all bindings and values.
You can have a DOM element only show when a scope variable has a certain value, like this:

<div ng-show="show_div">Text in div</div>

Whenever the $digest runs, it checks if $scope.show_div is true and if it is, the div is shown. If not true, the div is hidden.

That means that in your controller you can toggle the visibility of the div by simply setting $scope.show_div = true/false. However, if you do this on mouseover an element or change the value very frequently some other way the $digest might not have had the time to finish it’s loop and the div won’t toggle as it should.

That’s where $timeout comes in. It’s a wrapper for javascript’s setTimeout with the addition that it triggers a $digest loop at the end meaning that anything you changed will be updated as it should.
So instead of $scope.show_div = true and then $scope.show_div = false you do:

$timeout(function() { $scope.show_div = true; }, 0);
$timeout(function() { $scope.show_div = false; }, 0);
orreMBA 2014-07-29 kl. 15.10.43

Note to self on updating WordPress plugins via git-svn

I host my Two Factor Auth WordPress Plugin on Github and I run git svn locally to be able to sync the Github git repo with the WordPress plugins SVN repo.

But, it’s a bit of a hassle and I don’t update the plugin often enough to remember what step to take.

The assumption is that you’ve followed this guide to setup you local repo with svn and git remotes.


Write code in local git feature branches as usual. Push the finished code to Githubs master branch and add a git tag.


Create a new local git branch (or use a clean old one) and merge local master branch (remember to squash all commits!) into this one. It has to have a straight history.


Run git svn rebase the see that the history matches with the remote Worpress svn repo.


Run git svn dcommit --username yourusername to push the code to WordPress svn repo. Remember that you have to change all the tags in your readme.txt and you main plugin file to match the new release version.


Run git svn tag x.x to copy trunk and create a new remote tag/release from it.