jQM and Angular JS and MVC

by hellosze

HTML

<!DOCTYPE html>
<html ng-app="todo">
    <head>
        <title>TodoMobile</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
        <script src="https://github.com/tigbro/jquery-mobile-angular-adapter/raw/master/compiled/jquery-mobile-angular-adapter-standalone-1.0.7-rc1.js" type="text/javascript"></script> 
        <link href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.css" rel="stylesheet" type="text/css">
    </head>
<body ng-controller="TodoController">
<div id="main" data-role="page" ngm-pagebeforeshow="refreshTodos()" ngm-swipeleft="showSettings()">
    <div data-role="header">
        <h1>Todos</h1>
        <a href="" id="saveTodos" data-role="button" ngm-click="saveTodos()">Save</a>
        <a href="#settings" data-role="button">Settings</a>
    </div>

    <div data-role="content">
        <div data-role="fieldcontain">
            <form ng-submit="addTodo()" data-ajax="false">
                <input type="text" id="inputText" ng-model="$parent.inputText" placeholder="enter your todo here" ng-model-instant>
            </form>
        </div>
        <fieldset data-role="controlgroup">
            <div ng-repeat="todo in todos | paged:{pageSize:5}">
                <input type="checkbox" ng-model="todo.done" id="todo{{$index}}"/>
                <label for="todo{{$index}}">{{todo.name}}</label>
            </div>
            <div ngm-if="todos | paged:'hasMore'">
                <a href="#" ngm-click="todos | paged:'loadMore'" data-role="button">Load more</a>
            </div>
        </fieldset>
    </div>
</div>

<div id="settings" data-role="page" ngm-swiperight="back()">
    <div data-role="header">
        <h1>Settings</h1>
        <a href="" id="saveSettings" data-role="button" data-rel="back">Save</a>
    </div>

    <div data-role="content">
        <div data-role="fieldcontain">
            <input type="text" id="storageKey"...

CSS

.ui-input-text,
.ui-select {
    width: 100% !important;
    padding: 0.4em 0 !important;
}

JavaScript

var module = angular.module("todo", []);
module.factory('todoStore', function($http, $waitDialog) {
    var readUrl = 'https://secure.openkeyval.org/';
    var writeUrl = 'https://secure.openkeyval.org/store/?';

    function read(key) {
        $waitDialog.show();
        return $http({
            method: 'JSONP',
            url: readUrl + key+'?callback=JSON_CALLBACK'
        }).then(function(response) {
            $waitDialog.hide();
            return response.data;
        });
    }

    function write(key, value) {
        $waitDialog.show();
        value = encodeURIComponent(JSON.stringify(value));
        $http({
            method: 'JSONP', 
            url: writeUrl + key + '=' + value+'&callback=JSON_CALLBACK'
        }).then(function() {
            $waitDialog.hide();
        });
    }

    return {
        read: read,
        write: write
    }

});


module.controller('TodoController', function($scope, $navigate, todoStore) {
    $scope.storageKey = 'JQueryMobileAngularTodoapp';
    $scope.data = {
        todos: [],
        inputText: ''
    };
    $scope.addTodo = function() {
        $scope.todos.push({name: $scope.inputText, done: false});
        $scope.inputText = '';
    };
    $scope.showSettings = function() {
        $navigate("#settings");
    };
    $scope.back = function() {
        $navigate('back');
    };
    $scope.refreshTodos = function() {
        todoStore.read($scope.storageKey).then(function(data) {
            if (!data) {
                data = [];
            }
            $scope.todos = data;
        });
    };
    $scope.saveTodos = function() {
        // delete all checked todos
        var newTodos = [], todo;
        for (var i=0; i<$scope.todos.length; i++) {
            todo = $scope.todos[i];
            if (!todo.done) {
                newTodos.push(todo);
            }
        }
        $scope.todos = newTodos;
        todoStore.write($scope.storageKey, $scope.todos);
    }
});