Getting started

You just need to follow these five simple steps:

1 » Include Ladybug in your project

Just add all the required files and dependencies in your header or footer:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/underscore.min.js"></script>
<script type="text/javascript" src="js/ladybug.min.js"></script>

You'll need jQuery 1.9 or later and Underscore.js 1.5 or later

2 » Add your markup with some sweet templates

Ladybug.js uses HTML templates to render the module contents, creating them is very easy and straightforward:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ladybug Demo</title>
    </head>
    <body>
        <!-- Base markup -->
        <section>
            <div class="container">
                <div id="client">
                    <!--  -->
                </div>
            </div>
        </section>
        <!-- Templates -->
        <script type="text/template" id="page-home">
            <h1>Hello World!</h1>
        </script>
    </body>
</html>

If you need more info on the template syntax, check out the Underscore's documentation.

3 » Create your application object

Now you'll need an Application object to manage the routing and core logic:

AppSample = Ladybug.Application.extend({
    init: function(options) {
        var obj = this;
        // Call parent's constructor
        obj._super(options);
    },
    onDomReady: function() {
        var obj = this;
        // Start the router
        obj.router.start();
    }
});

4 » Create a basic module

And also one or more Modules to implement the logic of your sections and display them:

ModuleHome = Ladybug.Module.extend({
    init: function(options) {
        var obj = this;
        // Call parent's constructor
        obj._super(options);
    },
    onDomReady: function(params) {
        // Bind events and stuff
    },
    onRender: function(params) {
        var obj = this;
        app.element.html( obj.templates.page() );
    },
    onPrepareTemplates: function(params) {
        var obj = this;
        obj.templates.page = Ladybug.Utils.compileTemplate('#page-home');
    }
});

5 » And crank it up

Just fire up the application and hook some modules to its corresponding routes and you're set:

var app;
app = new AppSample({
    element: '#client'
});
app.registerModule('home', new ModuleHome);

And that's it. You now have a running Ladybug.js App!

Go back to previous page