Example isomorphic page

gistfile1.js

module.exports = {

    /**
     * Generate the model for the page. This is called before the page is rendered
     * by both the client and the server.
     * 
     * @param Q
     * @param postService
     * @returns {*}
     */
    model: function (Q, postService) {
        var deferred = Q.defer();
        var model = {
            pageHead: {
                title:          'Answers to Customer Service Questions | GetHuman',
                description:    'Answers to Customer Service Questions by GetHuman',
                keywords:       'customer service, support question, support answer'
            }
        };

        postService.find({ where: { type: 'question' }, limit: 5 })
            .then(function (questions) {
                model.featuredQuestions = questions;
                deferred.resolve(model);
            });

        return deferred.promise;
    },

    /**
     * The same template view is used for the client and the server. This is still
     * a work in progress. The injected html function names are not necessary, but
     * just eliminate the 'invalid function' jshint checks in webstorm.
     */
    view: function (div, img, h1, a, incl) {
        return [
            div({ 'class': 'banner' }, [
                img({
                    'ng-src': "{{ 'img/red-phone.jpg' | staticFile }}",
                    alt: 'Take the pain and waiting out of customer service'
                }),
                h1('Take the pain & waiting out of customer service'),
                a({
                    'href':     '#',
                    'gh-tap':   'askQuestion()',
                    'title':    'See if someone else already solved your problem',
                    'class':    'btn btn-lg btn-primary'
                }, 'Ask a Question')
            ]),
            div({ 'class': 'ques-wrapper' }, [

                //TODO: how do we do includes? directive vs server side
                incl('questions')
            ])
        ];
    },

    /**
     * Client controller for the home page. This is ONLY used by the client. The idea
     * is that the model loader above is run on client and server to get the data for
     * the page, but really a controller is only needed for the client (in most cases) 
     * in order to respond to user events.
     * 
     * @param $scope
     * @param eventBus
     */
    controller: function ($scope, eventBus) {

        /**
         * Emit event that is handled by the search box to set focus
         */
        $scope.askQuestion = function () {
            eventBus.emit('search.focus');
        };
    },

    /**
     * Styles for the home page. This is using absurd.js. Still a work in progress, but
     * FYI we should be able to greatly thin this out with some refactoring. With it all
     * in JS it should be very easy to create higher level functions for a lot of this.
     * Also, a bigger effort to improve the styles will help here as well.
     */
    styles: function () {
        return {
            '#gh-answers-home': {
                
                '>.ques-wrapper': {
                    padding: '0 10px',
                    '@media (min-width: 480px)':    { padding: '0 25px' },
                    '@media (min-width: 998px)':    { padding: '0 50px' },
                    '@media (min-width: 1200px)':   { padding: '0 70px' }
                },

                '>.banner': {
                    'margin-top': '35px',
                    'width': '100%',
                    position: 'relative',

                    '@media (min-width: 480px)': {
                        width: '80%',
                        marginLeft: '10%',
                        marginRight: '10%'
                    },

                    '@media (min-width: 768px)': {
                        marginLeft: '0',
                        marginRight: '0',
                        width: '500px',
                        height: '333px'
                    },

                    '@media (min-width: 992px)': {
                        width: '590px',
                        height: '393px',
                        marginLeft: '20px',
                        marginRight: '20px'
                    },

                    '@media (min-width: 1200px)': {
                        width: '690px',
                        marginLeft: '70px',
                        marginRight: '70px',
                        height: '459px'
                    },

                    '>img': {
                        width: '100%',
                        '@media (min-width: 768px)':  { width: '500px', height: '333px' },
                        '@media (min-width: 992px)':  { width: '590px', height: '393px' },
                        '@media (min-width: 1200px)': { width: '690px', height: '459px' }
                    },

                    '>h1': {
                        position: 'absolute',
                        top: '-15px',
                        left: '10px',
                        fontSize: '28px',

                        '@media (min-width: 610px)': { fontSize: '42px' },
                        '@media (min-width: 768px)': { left: '30px' },
                        '@media (min-width: 992px)': {
                            width: '100%',
                            margin: '0',
                            padding: '0 45px',
                            top: '-10px'
                        },
                        '@media (min-width: 1200px)': { fontSize: '53px' }
                    },

                    '>a': {
                        display: 'block',
                        position: 'absolute',
                        top: '55px',
                        marginLeft: '10px',
                        padding: '10px 20px',

                        '@media (min-width: 480px)':  { top: '60px',  left: '30px' },
                        '@media (min-width: 610px)':  { top: '100px', left: '30px' },
                        '@media (min-width: 992px)':  { top: '110px', marginLeft: '90px' },
                        '@media (min-width: 1200px)': { top: '140px' }
                    }
                }
            }
        };
    }
};