如何在本地设置 Jquery Mobile Angular Adapter Todo 应用程序

>我正在尝试通过设置Github存储库上引用的Todo应用程序JSFiddle的本地存储库来学习jQuery Mobile Angular适配器：

http://jsfiddle.net/ocdemo/UM5Mr/

我

指的是"独立"包，我假设它包括jQM和Angular。 jQuery在控制台中可用，我已经测试了Angular模型是否正常工作。

但是，没有任何页面路由有效，并且所有应用程序功能都不起作用。我得到了 HTML 标记，但无法触发任何应用方法。我注意到 HTML 中没有提到控制器的任何地方。这正常吗？

也许是在本地主机上运行它并使用 secure.openkeyval.org 的问题？

我尝试从 jqm-angular 适配器存储库中提取所有 util js 文件。

我觉得我在这里错过了一些基本的东西。感谢这个角度新手的任何帮助。

谢谢。

这是我的 HTML：

<!DOCTYPE="HTML">
<html ng-app>
<head>
    <style>
    .ui-input-text,
    .ui-select {
        width: 100% !important;
        padding: 0.4em 0 !important;
    }
    </style>
            <title>TodoMobile</title>
            <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
            <script src="lib/jquery-mobile-angular-adapter-standalone.min.js" type="text/javascript"></script> 
            <link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css">
            <script type="text/javascipt" src="lib/utils/event.js"></script>
<script type="text/javascipt" src="lib/utils/if.js"></script>
<script type="text/javascipt" src="lib/utils/sharedController.js"></script>
<script type="text/javascipt" src="lib/utils/waitDialog.js"></script>
<script type="text/javascipt" src="lib/utils/paging.js"></script>
<script type="text/javascipt" src="js/app.js"></script>
</head>
<body ng-app="todo">
<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-vclick="saveTodos()">Save</a>
        <a href="settings" data-role="button">Settings</a>
    </div>
    <div data-role="content">
        <!-- test angular -->
        <input type="text" ng-model="testing">
        <div>{{testing}}</div>
        <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>
        <form data-role="controlgroup">
            <label ng-repeat="todo in todos | paged:'pager':5">
                {{todo.name}}
                <input type="checkbox" ng-model="todo.done" id="checked">
            </label>
            <div ngm-if="pager.hasMore">
                <a href="#" ngm-vclick="pager.loadMore()" data-role="button">Load more</a>
            </div>                
        </form>
    </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" ng-model="$parent.storageKey" placeholder="enter your storage key here">
        </div>
    </div>
</div>
</body>

</html>

这是我的JS：

var module = angular.module("todo", []);
module.config(function($routeProvider) {
    $routeProvider.when('/settings', {
        templateUrl: '#settings',
        jqmOptions: {transition: 'slide'}
    });
});
module.factory('todoStore', function($http, $waitDialog) {
    console.log('set up read/write');
    var readUrl = 'https://secure.openkeyval.org/';
    var writeUrl = 'https://secure.openkeyval.org/store/?';
    function read(key) {
        console.log('read');
        $waitDialog.show();
        return $http({
            method: 'JSONP',
            url: readUrl + key +'?callback=JSON_CALLBACK'
        }).then(function(response) {
            $waitDialog.hide();
            return response.data;
        });
    }
    function write(key, value) {
        console.log('write');
        $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, $history, $location, todoStore) {
    $scope.storageKey = 'JQueryMobileAngularTodoapp';
    $scope.data = {
        todos: [],
        inputText: ''
    };
    $scope.addTodo = function() {
        console.log('adding todo');
        $scope.todos.push({name: $scope.inputText, done: false});
        $scope.inputText = '';
    };
    $scope.showSettings = function() {
        console.log('show settings');
        $location.url("/settings");
    };
    $scope.back = function() {
        $history.goBack();
    };
    $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);
    }
});

有些愚蠢的东西。由于以下原因，令人头疼：

改变：

<script type="text/javascript" src="js/main.js"></script>

自：

<script src="js/main.js"></script>

我带有角度代码的 js 文件根本没有加载，这是通过植入控制台日志发现的，没有一个触发。

马克

相关内容

最新更新

热门标签：