AngularJS Example

by ocdemo

HTML

<script src="http://opitzconsulting.github.io/angular-jqm/master/docs/js/angular.min.js"></script>
<script src="http://opitzconsulting.github.io/angular-jqm/master/docs/grunt-scripts/jquery.mobile.css.js"></script>
<script src="http://opitzconsulting.github.io/angular-jqm/master/docs/grunt-scripts/angular-jqm.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-mobile.js"></script>
<div jqm-viewport></div>

<script type="text/ng-template" id="page1.html">
    <!-- the main page of your app -->
    <div jqm-page>
        <div jqm-header><h1>Page1</h1></div>
        <div jqm-footer>
            <h1>Test fixed footer</h1>
        </div>

        <p>hello</p>
        <a href="#/page2.html">To page2</a>
    </div>
</script>

<script type="text/ng-template" id="page2.html">
    <!-- Another page -->
    <div jqm-page>
        <div jqm-header><h1>Page2</h1></div>
        <div jqm-footer>
            <h1>Test fixed footer</h1>
        </div>
        <a href="#/page1.html">To page1</a>

        <p>hello</p>
    </div>
</script>

JavaScript

var mod = angular.module("app", ["jqm"]);
        mod.config(function ($routeProvider) {
            $routeProvider.when("/:page", {
                transition: 'slide',
                templateUrl: function (params) {
                    return params.page;
                }
            });
            $routeProvider.otherwise({
                redirectTo: '/page1.html'
            });
        });