Orangevolt Ampere - Greet Example

Running Orangevolt Ampere within JSFiddle is easy - just add http://lgersman.github.com/jquery.orangevolt-ampere/dist/min/oval.js as external resource and you're done !

by lgersman

HTML

<script src="http://lgersman.github.com/jquery.orangevolt-ampere/dist/min/oval.js"></script>
<script id="main" type="text/template">
            <form>
                <label for="value">Enter name to greet:</label>
                <input type="text" id="value" ng-model="value" required/>
                <br/>
                <submit ng-ampere-transition="$ampere.view.state().transitions.greet"/>
            </form>
</script>

JavaScript

var greet = ov.ampere().module(function greet(module) {
    module.state({
        main: function() {
            this.transition(module.states.greet).enabled(function() {
                return document.getElementsByTagName('form')[0].checkValidity();
            });

            this.view(document.getElementById('main'));
        },

        greet: function() {
            this.transition(module.states.main);

            this.view('<h4>Hello {{$ampere.module.states.main.value | ucwords}} !</h4>' + '<button ng-ampere-transition="$ampere.view.state().transitions.main"></button>');
        }
    }).options({
        'ampere.ui.about': 'This is a sample <a target="_blank" href="https://github.com/lgersman/jquery.orangevolt-ampere">Ampere</a> application.',
        'ampere.ui.about.url': 'https://github.com/lgersman/jquery.orangevolt-ampere'
    });
});

$(window).ready(function() {
    $('body').ampere(greet, {

    });
});