Canonical way to define page objects in Protractor

We've been using the Page Object pattern for quite a while. It definitely helps to organize the end-to-end tests and makes tests more readable and clean.

As Using Page Objects to Organize Tests Protractor documentation page shows us, we are defining every page object as a function and use new to "instantiate" it:

"use strict";

var HeaderPage = function () {
    this.logo = element(by.css("div.navbar-header img"));
}

module.exports = HeaderPage;

Usage:

"use strict";

var HeaderPage = require("./../po/header.po.js");

describe("Header Look and Feel", function () {
    var header;

    beforeEach(function () {
        browser.get("/#login");
        header = new HeaderPage();
    });

    it("should show logo", function () {
        expect(header.logo.isDisplayed()).toBe(true);
    });

});

But, recently in the Protractor: Angular testing made easy Google Testing Blog post, I've noticed that a page object is defined as an object:

var angularHomepage = {
    nameInput : element(by.model('yourName')),
    greeting : element(by.binding('yourName')),
    get : function() {
        browser.get('index.html');
    },
    setName : function(name) {
        this.nameInput.sendKeys(name);
    }
};

What is the difference between these two ways to introduce Page Objects? Should I prefer one against the other?