Adding New Client Pages

There are several steps you must follow, to add a new client side page. Following are the steps, with examples. Remember, the client js is in /node/web/public/scripts, and the templates are in /node/web/views/templates.

First, let's add a controller. Take a look at the exampleController, for an example.

ALWAYS remember to return $this in your controller factories! Otherwise your routes will NOT get registered.

Below is a sample route that has before and after pipelines.

// route with `before` and `after` pipelines, using GidgetRoute
$this.get['/gidget/example'] = new GidgetRoute({
    before: function (err, req) {
        console.log('before example 1 route:', req);
    },
    routeHandler: function (err, req) {

        // you may need to use AJAX to connect with the server here
        // check out the homeController search route for an example

        viewEngine.setVM({
            // the id of your template goes here
            template: 't-empty',
            // data from your model goes here (i.e. `new MyModel()`)
            data: {
                heading: locale.pages.home.empty.heading,
                body: 'Route: "/gidget/example"'
            },
            after: function (vm) {
                console.log('view model:', vm);
            }
        });
    },
    after: function (err, req) {
        console.log('after example 1 route:', req);
    }
});

If you don't need before and after pipelines, you can opt to set the value of the routeHandler as the value of the route:

// route with `before` and `after` pipelines, using GidgetRoute
$this.get['/gidget/example'] = function (err, req) {

    // you may need to use AJAX to connect with the server here
    // check out the homeController search route for an example

    viewEngine.setVM({
        // the id of your template goes here
        template: 't-empty',
        // data from your model goes here (i.e. `new MyModel()`)
        data: {
            heading: locale.pages.home.empty.heading,
            body: 'Route: "/gidget/example"'
        },
        after: function (vm) {
            console.log('view model:', vm);
        }
    });
};

Now, let's add a model. You can look in the models directory for examples.

Hilary.scope('heinz').register({
    name: 'MyModel',
    dependencies: [],
    factory: function () {
        'use strict';

        var MyModel;

        MyModel = function (myModel) {
            var self = {
                name: ko.observable(myModel.name || 'Enter a name'),
                description: ko.observable(myModel.description);
            };

            return self;
        };

        return MyModel;
    }
});

Register the controller in the composeRoutes function of our bootstrapper.

gidgetApp.registerModule(scope.resolve('exampleController'));

Add a view to the templates folder

<!-- example.hbs -->
<script id="t-example" type="text/html">

    <div class="example-component" data-bind="with: data">
        <h1 data-bind="text: name"></h1>
        <div data-bind="text: description"></div>
    </div>

</script>

Register the partial in layout.hbs.

{{> example}}

And add scripts for each of the js files you just created

<script src="/scripts/controllers/exampleController.js"></script>
<script src="/scripts/models/MyModel.js"></script>