How to: Install - AyphixEntertainmentLLC/Esper GitHub Wiki

Step 1: Files

To install Esper copy espada.js or esper.min.js into your web application, usually these will go into the js/ folder.

Note: If you want to use the ES6 version copy over esper.es6.js or esper.es6.min.js into your web app usually into the js/ folder

Esper relies on JQuery so you will need to have that as well, if you want to use the provided version just copy over the vendor folder from the provided js/ directory.

Step 2: HTML

In your index HTML code prepend <script src="path/to/esper.(min/es6).js"></script>

to the top of the body make sure you include JSQuqery before Esper.

Step3: Creating your App

Create a folder to hold all your app's config files/controllers/views in our example's we created a folder called "app".

Once that's done create a new javascript file, we used app.js once that's done all you have to do is open it and create an app.

Once you have your .js file you created open we need to first create our app you do so like this:

var your_var_name = new Application("*Application Name*", "*Application Folder*");

Replace Application Name with the name of your Application, and replace Application Folder with your app's folder. (In the examples, we used "app")

Once that's done just append <script src="path/to/your/app.js"><script> at the end of your body tag.

Step 4: Routes

After you've created your application (Yes that's actually all there is to it!) we just need to now setup our routes. You can do that like this:

var your_routes_var = [
    {
        url: "/",
        controller: *Controller*,
        view: "*Application Folder*/views/your_html_or_php.(html/php)"
    }
];

Once again replace Application folder with your application path, we used app in the examples.

The controller is optional, we will have a whole section on routes later but for now, this works. Replace Controller with the name of a function WITHOUT the ().

Step 5: Views

At a later date we will have a whole section on these, but for now we will focus on how to get views to show up in your index page.

So how do we do that?

<view></view>

"Seriously?" Yep that's it, you just put that HTML tag anywhere you want to have your view's put. Keep in mind you may only have ONE tag or Espada will display an error on your page. I noticed a issue with the short form version which as <view> for some reason it was wrapping everything below it. So to prevent this weirdness on some browsers we just close it ourselves.

Step 6: Starting the app

your_var_name.start(your_routes_var);

"Quit joking around" no joke, that's all it takes.

Step 6: Profit

No but really that's all it takes. We setup the examples in around 3-5 minutes.