html getting started - crashkonijn/AirController GitHub Wiki

Html: Getting started

The controller part of AirController comes in two flavors; with simple HTML files and using a Vue CLI project. Both use the same html syntax but the advanced project makes it easier to do more advanced things.

HTML files (Simple)

The easiest way to get started with your controller for AirController is by including the required files in a basic HTML file. It doesn't come with all of the devtools that the Vue project offers but is the best if you want to keep things simple.

The example below is of a minimal working version:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>AirController demo</title>
        <link rel="stylesheet" href="https://unpkg.com/air-controller-vue/dist/air-controller.css">
        <script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.7.0.js"></script>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but air-controller doesn't work properly without JavaScript enabled. Please enable it to
                continue.</strong>
        </noscript>
        <div id="app">
            <air-controller page="loading">
                <air-page name="loading">
                    <h1>Loading..</h1>
                </air-page>
            </air-controller>
        </div>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/air-controller-vue/dist/air-controller.umd.js"></script>
    </body>
</html>

Vue project (Advanced)

A bit harder, but comes with the best tools web-development currently has to offer is using a NodeJs based Vue project. Using AirController this way allows you to use SASS (a much easier way of writing CSS), NPM, code minification and makes it much easier to create your own Vue Single File Components.

To make things easier there is a boilerplate project available to get you started right away!

⚠️ **GitHub.com Fallback** ⚠️