Vytvoření ukázkové aplikace se seznamem úkolů

Článek
06/14/2015

V tomto kurzu se dozvíte, jak vytvořit aplikaci ukázky seznamu úloh pomocí AngularJS (AngularJSToDo).Tato aplikace umožňuje uživatelům vytvářet nové úkoly, vraťte je a je odebrat.Aplikace uloží také úlohy pomocí specifikace HTML5 webové úložiště v zařízení.(Celý vzorek používá mobilní služby Microsoft Azure k ukládání dat a používá Bing Maps také poskytnout platnou adresu.) V tomto příkladu kódu jazyka JavaScript, ale můžete také napsat své Cordova aplikace na stroji.

[!POZNÁMKA]

Přehled úloh potřebných k vytvoření Cordova aplikace naleznete v tématu Vytvoření aplikace Apache Cordova.

Vzorová aplikace pro seznam úkolů je k dispozici pro více platforem a lze stáhnout zde:

Stáhnout dalších ukázek pro sadu Visual Studio Tools pro Apache Cordova, které ukazují procházení více stránek a další funkce, naleznete v článku Ukázka stránky podrobností AngularJS a Šablona navigace aplikace WinJS

V tomto výukovém kurzu provedením následujících kroků:

Vytvořte projekt
Vytvoření uživatelského rozhraní
Přidat AngularJS framework
Registruje moduly aplikace
Přidat datový model
Přidat zobrazení logiku a data vazby
Vytvoření a spuštění aplikace ToDo seznamu
Přidat služby Bing Maps
Přidat mobilních službách Azure

Požadované součásti

Před vytvořením nového projektu, ujistěte se, že jste splněny všechny požadavky na systém a nainstalovat sadu Visual Studio Tools pro Apache Cordova rozšíření pro sadu Visual Studio.Další informace naleznete v tématu Instalace nástrojů Visual Studio Tools for Apache Cordova.

Vytvořte projekt

Vytvoření nového projektu Cordova v sadě Visual Studio pomocí následujících kroků popsaných v Create Your First Hello World App.Můžete také v nové aplikaci prázdné Začněte volbou soubor, Nový, a potom projektu v sadě Visual Studio.V dialogovém okně Nový projekt zvolte nainstalované, šablony, jazyka JavaScript, Apache Cordova aplikace, a poté zvolte možnost prázdné aplikace šablony.

Vytvoření uživatelského rozhraní

Hlavní uživatelské rozhraní v vzorová aplikace pro seznam úloha se skládá z následující prvky:

Element < input > pro nové položky seznamu.
Šablona AngularJS, které se zobrazí všechny úlohy v seznamu úloh.

Element < input > vypadá nějak takto:

<input id="new-todo" placeholder="What needs to be done?" ng-text-change="addToDo()" ng-model="newToDoText" autofocus>

Při prvním spuštění aplikace, některé atributy v předchozím kódu nebude provádět žádné kroky.Můžete například AngularJS ng-model směrnice umožňuje obousměrné datové vazby a slouží k uložení vloženým úloha, když addToDo() Funkce spustí.

Pro seznam úkolů můžeme definovat šablony pomocí některé vnořené < div > prvky, které balí několik dalších prvků.Můžete například vnořené < input > elementu, jak je zde znázorněno se používá k zobrazení každý úkol řetězec.

<div class="templateWrapper" ng-repeat="toDoItem in todos">
    <div class="templateContainer">
        <input class="templateTitle" ng-class="{crossedOut: toDoItem.done}" type="text" ng-text-change="changeToDoText(toDoItem)" ng-model="toDoItem.text" />
        <!-- More list item HTML elements -->
    </div>
</div>

V předchozím kódu, atribut AngularJS ng-repeat, vám umožní zadat element na nejvyšší < div > jako šablonu, kterou chcete-li zobrazit položky seznamu úkolů.Později, když připojit skutečná data a spusťte aplikaci, ng-repeat přidá < div > podřízený prvek (templateContainer) a jeho podřízených elementů do modelu DOM pro každou položku seznamu uložených úlohu.

[!POZNÁMKA]

Vzhledem k tomu, že Cordova není závislá na libovolné konkrétní architektura jazyka JavaScript, můžeme nejsou snaží poskytují podrobné informace o AngularJS programování v těchto kroků.Namísto toho doporučujeme jsou zobrazeny dobrým příkladem jeden způsob, jak vytvořit aplikaci pro různé platformy pomocí Visual Studio Tools pro Apache Cordova.

Nyní přidáme dokončení kód pro index.html.

Přidání kódu pro seznam

Otevřete index.html a nahraďte elementu < text > s následujícím kódem.

<body ng-app="xPlat">
    <section id="todoapp" ng-controller="ToDoCtrl">
        <header id="header">
            <div id="headerBand"></div>
            <input id="new-todo" placeholder="What needs to be done?" ng-text-change="addToDo()" ng-model="newToDoText" autofocus>
        </header>
        <section id="main">
            <div id="todo-list">
                <div class="templateWrapper" ng-repeat="toDoItem in todos">
                    <div class="templateContainer">
                        <input class="templateTitle" ng-class="{crossedOut: toDoItem.done}" type="text" ng-text-change="changeToDoText(toDoItem)" ng-model="toDoItem.text" />
                        <h3 class="templateAddress">{{toDoItem.address}}</h3>
                        <button class="templateLeft templateToggle" ng-class="{'checked': toDoItem.done, 'unchecked': !toDoItem.done}" ng-mousedown="toggleToDoDone(toDoItem)"></button>
                        <button class="templateLeft templateRemove" ng-click="removeToDo(toDoItem)"></button>
                    </div>
                    <div class="templateBorder"></div>
                </div>
            </div>
        </section>
    </section>

    <script src="scripts/index.js"></script>
</body>

Když přidáte architekturu AngularJS (v dalších krocích), další atributy AngularJS zadaný v index.html vstoupí smysluplné, ale prozatím nebudou mít žádný vliv při spuštění aplikace.Zde najdete další atributy AngularJS součástí index.html:

ng-app Direktiva k určení kořenový uzel AngularJS aplikace.
ng-controller Chcete-li určit AngularJS řadiče pro podporu MVC.

Výchozí < text > element v šabloně prázdné aplikace zahrnut odkaz na Apache Cordova a odkaz na platformOverrides.js, které jste přepsána.V dalším kroku přidáte tyto odkazy Zpět k souboru, do elementu < head >.

Přidat odkaz na knihovnu Cordova

V index.html přidáte následující reference skriptu v elementu < head > před jiných skriptu odkazů.

<!-- Cordova reference -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>

Přidat informace o stylu CSS

V šablon stylů css složky, otevřete index.css a přidejte následující informace stylu CSS pro elementy HTML a šablon.

/* reset layout*/
html,
body {
    margin: 0;
    padding: 0;
}

/* body*/
body {
    background: #F7f7f7;
    color: #4d4d4d;
    width: 100%;
    margin: 0 auto;
}

/* no outline for buttons & checkboxes*/
button,
input[type="checkbox"] {
    outline: none;
}

/* section styles*/
@media (min-width: 550px) {
    #todoapp {
        width: 74vw;
        left: 13vw;
        top: 50px;
    }
}

#todoapp {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    position: relative;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.15);
}

/* the 2 red rulers*/
#todoapp:before {
    content: '';
    border-style: solid;
    border-left-color: rgba(242, 103, 103, 1);
    border-right-color: rgba(242, 103, 103, 1);
    border-width: 1px;
    z-index: 2;
    width: 2px;
    position: absolute;
    top: 0;
    left: 40px;
    height: 100%;
}

/* dark band on the header*/
#headerBand {
    position: relative;
    height: 4vh;
    max-height: 20px;
    border-bottom: 1px solid #6c615c;
    background: rgba(52, 59, 69, 1);
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
}

/* the new to-do entry*/
#new-todo {
    background: rgba(237, 237, 237, 0.9);
    position: relative;
    margin: 0;
    height: 10vh;
    max-height: 70px;
    font-size: 21px;
    font-family: "Arial";
    border: 0;
    outline: none;
    color: rgb(114, 115, 115);
    padding: 0 0 0 56px;
    width: 100%;
    box-sizing: border-box;
}

/* the main section that hosts the listview*/
#main {
    position: relative;
    z-index: 1;
    border-top: 1px dotted #adadad;
}

/*todo list*/
#todo-list {
    height: 86vh;
    min-height: calc(100vh - 90px);
    margin: 0px;
    overflow-y: auto;
}

/*the host template*/
.templateWrapper {
    position: relative;
    overflow: hidden;
}

.templateBorder {
    height: 0;
    border-bottom: 2px solid #bfdbf2;
}

/* container for the todo-address div*/
.templateContainer {
    width: calc(100% - 50px);
    margin: 4px 5px 0px 45px;
}

.templateContainer input[type="text"] {
    font-size: 18px;
    font-family: "Arial";
    background: none;
    color: #2d3239;
    border: 1px solid rgba(0, 0, 0, 0);
    line-height: 0.6em;
    margin: 0px;
    width: calc(100% - 10px);
    display: block;
    padding: 4px 0px 4px 10px;
}

.templateContainer input[type="text"]:active,
.templateContainer input[type="text"]:focus {
    color: #2d3239;
    border: 1px solid #b2b2b2;
    outline: none;
    margin-left: 2px;
    text-decoration: none !important;
    padding-left: 8px;
}

input[type="text"]:active ~ .templateRemove,
input[type="text"]:focus ~ .templateRemove,
.templateRemove:active,
.templateRemove:focus {
    display: inline-block;
}

input[type="text"]:active ~ .templateToggle,
input[type="text"]:focus ~ .templateToggle,
.templateRemove:active ~ .templateToggle,
.templateRemove:focus ~ .templateToggle {
    display: none;
}

.crossedOut.templateTitle {
    text-decoration: line-through;
}

.templateContainer .templateAddress {
    color: #727272;
    font-size: 12px;
    font-family: "Arial";
    padding-top: 0px;
    margin: 0px 0px 10px 11px;
    font-weight: normal;
}

.templateContainer p {
    margin: 0px 0px 4px 0px;
}

/* checkbox on the templated item*/
.templateLeft {
    position: absolute;
    top: 6px;
    left: 5px;
    border: none;
    width: 29px;
    height: 29px;
    min-width: 0;
    min-height: 0;
}

/* button for remove*/
.templateRemove {
    display: none;
    background-image: url('https://go.microsoft.com/fwlink/?LinkID=403181');
}

button {
    background-color: transparent;
}

button.checked {
    background-image: url('https://go.microsoft.com/fwlink/?LinkID=403179');
}

button.unchecked {
    background-image: url('https://go.microsoft.com/fwlink/?LinkID=403180');
}

Podívejte se na seznamu prázdnou úlohu můžete využívat v jednom z emulátory Chcete-li ověřit, zda vše, co jsou zobrazena správně.V tomto kroku spustíte aplikaci seznamu AngularJSToDo na systém Windows nebo na emulátoru Apache vln jejichž požadavky na minimální nastavení.Pokud dáváte přednost otestovat svou aplikaci na jiný cíl, naleznete v následujících tématech: Spuštění aplikace Apache Cordova v Androidu, Instalace nástrojů k vytváření aplikací pro iOS, a Spuštění aplikace Apache Cordova ve Windows Phonu.

K vytvoření a spuštění aplikace.

Zvolte Windows - x 64, Windows - x 86 nebo Android z řešení platformy seznamu.
Pokud jste zvolili platformu Android, vyberte jednu z emulátory Zvlnění, jak je znázorněno zde.

Pokud jste zvolili platformu Windows, můžete spustit aplikaci na výchozí cíl nasazení, místního počítače.
Stisknutím klávesy F5 pro spuštění ladění nebo Shift + F5 spustit bez ladění.

Na následujícím obrázku je ukázka jaké AngularJSToDo seznamu aplikaci vypadá jako v jednom z emulátory Zvlnění (bez skutečné dat ještě připojit).

Tip

Pokud jsou spuštěny na Zvlnění emulátor a dojde k chybě, která značí, že je nutné nainstalovat novou verzi Android SDK, pomocí Správce SDK Android k její instalaci.V systému Windows SDK Manager.exe je v \Android\android C:\Program Files (x 86) – sada sdk.

Přidat do projektu AngularJS framework

Teď, když se ujistíte, nastavení, můžete vytvořit aplikaci AngularJSToDo.Aplikace používá AngularJS do samostatných model zobrazení (MVC) má být poskytnuta vazba dat a podporovat nativní uživatelského rozhraní pro různé platformy.

Chcete-li přidat AngularJS do svého projektu

Z AngularJS webu, zvolte Stáhnout.

V Stáhnout AngularJS dialogového okna, ujistěte se, zda je vybrána minifikovaný 1.2.x verze AngularJS (výchozí verze) a pak zvolte Stáhnout uložit skript angular.min.js do vašeho počítače.
V Stáhnout AngularJS dialogové okno zvolte Procházet další moduly, a stáhnout úhlová resource.min.js.
V Průzkumníku řešení Visual Studio, přidejte novou složku v části skripty složky projektu s názvem rozhraní.

[!POZNÁMKA]

Tuto složku nelze přidat, pokud je spuštěna aplikace.Stisknutím klávesy Shift + F5 zastavení ladicí program.
Otevřete místní nabídku pro rozhraní složku a poté zvolte možnost Přidat, existující položku.Přidejte dva soubory AngularJS z kroků 1 a 2 do projektu.

Aktualizovat odkazy skriptu

V index.html přidejte následující odkazy AngularJS v elementu < head > po Cordova a platformOverrides odkazy na skripty.

    <script src="scripts/frameworks/angular.min.js"></script>
    <script src="scripts/frameworks/angular-resource.min.js"></script>

Odkazy na své skripty v elementu < head > by měl nyní vypadat takto.

    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/frameworks/angular.min.js"></script>
    <script src="scripts/frameworks/angular-resource.min.js"></script>

[!POZNÁMKA]

cordova.js potřebuje načíst před soubory AngularJS framework.

Přidáte odkazy skriptů pro moduly AngularJS na konci prvku < body >.Tyto odkazy by měl nyní vypadat takto.

    <script src="scripts/index.js"></script>
    <script src="scripts/services.js"></script>
    <script src="scripts/controllers.js"></script>
    <script src="scripts/directives.js"></script>

Registruje moduly aplikace

V této části se zaregistrujete AngularJS moduly aplikace umožňující připomínky samostatné aplikace.Moduly v této aplikaci zahrnují datový model (xPlat.services), AngularJS controller (xPlat.controller) a direktivy AngularJS (xPlat.directives) pro podporu vazby na data.Chcete-li zaregistrovat moduly, použijte angular.module funkce.

Chcete-li zaregistrovat úhlová modulů

V Průzkumníku řešení otevřete místní nabídku pro skripty složku a poté zvolte možnost Přidat, novou položku.
V Přidat novou položku dialogové okno zvolte soubor JavaScript, a pojmenujte ji services.js.
Opakováním kroků 2, chcete-li přidat další dvě JavaScript soubory jsou skripty složky:
- Controllers.js
- Directives.js

Otevřete index.js a nahraďte výchozí kód s následujícím kódem.

(function() {
    'use strict';
    angular.module('xPlat', ['xPlat.services', 'xPlat.controllers', 'xPlat.directives']);
    angular.module('xPlat.directives', []);
    angular.module('xPlat.controllers', []);
    angular.module('xPlat.services', ['ngResource']);
})();

Přidat datový model

Datový model je reprezentována xPlat.services modul, který budete implementovat v souboru services.js.Tento kód obsahuje služba, která poskytuje místní úložiště úlohy položek seznamu pomocí specifikace HTML5 webové úložiště (localStorage Vlastnosti).V této úvodní implementaci aplikace také poskytuje kód zástupný symbol pro služby Bing Maps, které může být implementováno plně později do.Dokončení vzorová aplikace pro také používá k ukládání dat Azure.

Následující kód aplikace volá metodu objekt pro vytváření modulu xPlat.services ke generování jednotlivé služby model dat, jako localStorage služby.Poznámka zde je zahrnutí $q součást služby ve funkci poskytovatele služeb.Tento objekt umožňuje asynchronní programování, takže můžete vytvořit pomocí objektu promise $q.defer.Pomocí objektu promise, můžete vyřešit nebo zamítnout asynchronní operace po dokončení.

Chcete-li přidat kód pro datový model

V skripty složky, otevřete services.js a přidejte následující kód.

(function () {
    'use strict';

    angular.module("xPlat.services")
        .factory("guidGenerator", function () {
            var generatePart = function () {
                var guidPartNumber = (Math.random() * 0x10000) | 0;
                return (guidPartNumber + 0x10000).toString(16).substring(1).toUpperCase();
            };

            return function () {
                return generatePart()
                    + generatePart()
                    + "-"
                    + generatePart()
                    + "-"
                    + generatePart()
                    + "-"
                    + generatePart()
                    + "-"
                    + generatePart()
                    + generatePart()
                    + generatePart();
            };
        })
        .factory("localStorage", ['$q', "$window", "guidGenerator", function ($q, $window, guidGenerator) {
            var localStorageKey = "toDoItems";

            var loadFromStorage = function () {
                return angular.fromJson($window.localStorage.getItem(localStorageKey)) || [];
            };

            var saveToStorage = function (items) {
                $window.localStorage.setItem(localStorageKey, angular.toJson(items));
            }

            return {
                getAll: function () {
                    return loadFromStorage();
                },

                create: function (text, address) {
                    var item = {
                        id: guidGenerator(),
                        text: text,
                        address: address,
                        done: false
                    }
                    var items = loadFromStorage();
                    items.push(item);
                    saveToStorage(items);
                    return $q.when(item);
                },

                update: function (item) {
                    var items = loadFromStorage();
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].id === item.id) {
                            items[i] = item;
                            break;
                        }
                    }

                    saveToStorage(items);
                    return $q.when(item);
                },

                del: function (item) {
                    var items = loadFromStorage();
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].id === item.id) {
                            items.splice(i, 1);
                            break;
                        }
                    }

                    saveToStorage(items);
                    return $q.when(null);
                }
            }
        }])

        // To support Azure, add Azure storage service
        // code here ("azureStorage").

        .factory("storage", ["$injector", function ($injector) {
            // var azureService = $injector.get('azureStorage');
            // return azureService.isAvailable ? azureService : $injector.get('localStorage');
            return $injector.get('localStorage');
        }])

        // To support Bing maps, replace mapSimulator 
        // with map code.
        .factory('mapsSimulator', ["$rootScope", "$q", "$timeout", function(rootScope, $q, $timeout) {

            return {                
                getUnknownAddress: function() {
                    var deferred = $q.defer();

                    $timeout(function() {
                        deferred.resolve([43.465187, -80.522372]);
                    }, 1500);

                    return deferred.promise;
                }
            }
        }])

        .factory("cordova", ['$q', "$window", "$timeout", function ($q, $window, $timeout) {
            var deferred = $q.defer();
            var resolved = false;

            document.addEventListener('deviceready', function () {
                resolved = true;
                deferred.resolve($window.cordova);
            }, false);

            $timeout(function () {
                if (!resolved && $window.cordova) {
                    deferred.resolve($window.cordova);
                }
            });

            return { ready: deferred.promise };
        }]);
})();

Přidání logiky zobrazení do aplikace a implementaci vazby dat

V této části budete implementovat modul řadiče AngularJS (xPlat.controllers) ke zpracování zobrazení logiku a pracovat s datový model.Kód implementuje deklarativní funkce v kódu HTML, jako addToDo, který přidá nový úkol do seznamu.V této části přidáte také direktivu AngularJS při provádění obousměrné datové vazby.

Důležitou součást tento kód je použití $scope pro synchronizaci datový model a zobrazení.Například zadáním $scope.addToDo = function () {}, neposkytujeme addToDo metodu, která je k dispozici pro deklarativní vazbu v zobrazení (index.html).

Chcete-li přidat správce

V skripty složky, otevřete controllers.js a přidejte následující kód.

Název řadiče ToDoCtrl, také odkazují AngularJS ng-controller direktivy v index.html.

(function () {
    'use strict';

    angular.module("xPlat.controllers")
        .controller('ToDoCtrl', ['$scope', 'mapsSimulator', 'storage', function ($scope, mapsSimulator, storage) {
        //.controller('ToDoCtrl', ['$scope', 'storage', function ($scope, storage) {
            var refresh = function () {
                $scope.todos = storage.getAll();
            }

            var getAddress = function () {
                //return maps.getCurrentPosition()
                //    .then(maps.getAddressFromPosition, function (error) { return error.message; });

                return mapsSimulator.getUnknownAddress();
            }

            $scope.addToDo = function () {
                var text = $scope.newToDoText;
                if (!text) {
                    return;
                };

                $scope.newToDoText = '';
                getAddress().then(
                    function (address) {
                        return storage.create(text, address);
                    },
                    function (errorMessage) { return storage.create(text, errorMessage); })
                .then(function (todo) {
                    $scope.todos.push(todo);
                });
            }

            $scope.changeToDoText = function (toDoItem) {
                getAddress().then(function (address) {
                    toDoItem.address = address;
                    return storage.update(toDoItem);
                }, function (errorMessage) {
                    toDoItem.address = errorMessage;
                    return storage.update(toDoItem);
                });
            }

            $scope.toggleToDoDone = function (toDoItem) {
                toDoItem.done = !toDoItem.done;
                storage.update(toDoItem);
            }

            $scope.removeToDo = function (toDoItem) {
                storage.del(toDoItem).then(function (todo) {
                    var index = $scope.todos.indexOf(todo);
                    $scope.todos.splice(index, 1);
                });
            }
            refresh();
        }]);
})();

Dále budete implementovat modulu direktivy.V tomto kódu vytvoříte vlastní směrnici pro určení chování onchange DOM události.Za běhu, tento kód přidruží obslužnou rutinu události správné (deklarované v značka jazyka HTML v index.html) k elementu, buď addToDoText nebo changeToDoText funkce.Tyto jsou implementovány v controllers.js.

Chcete-li přidat direktivu pro vazbu dat

V skripty složky, otevřete directives.js a přidejte následující kód.

(function () {
    'use strict';
    angular.module('xPlat.directives')
        .directive('ngTextChange', function () {
            return {
                restrict: 'A',
                replace: 'ngModel',
                link: function (scope, element, attr) {
                    element.on('change', function () {
                        scope.$apply(function () {
                            scope.$eval(attr.ngTextChange);
                        });
                    });
                }
            };
        });
})();

Vytvoření a spuštění aplikace

V tomto kroku spustíte aplikaci seznamu AngularJSToDo na systém Windows nebo na emulátoru Apache vln.

K vytvoření a spuštění aplikace.

Stisknutím klávesy F5 spusťte aplikaci na stejný cíl, které jste zadali dříve.Systém Windows a emulátoru vln mají požadavky na minimální nastavení, takže doporučujeme nejprve cílení na jeden z těchto dvou platformách.

Na následujícím obrázku ukazuje příklad jaké AngularJSToDo seznamu aplikaci vypadá jako v jednom z emulátory Zvlnění.

Přidat služby Bing Maps

Kompletní ukázky zahrnuje službu Bing Maps vaše aktuální adresa přidružit každá položka seznamu úloh.

Chcete-li přidat Bing Maps podpory k aplikaci:

Nahradit getAddress funkce v controllers.js s následujícím kódem z kompletní ukázky.

var getAddress = function() {
    return maps.getCurrentPosition()
        .then(maps.getAddressFromPosition,
         function(error) { return error.message; });
}

Nahradit dva mapsSimulator odkazy v controllers.js s maps odkazy.

angular.module("xPlat.controllers")
    .controller('ToDoCtrl', ['$scope', 'maps', 'storage', function ($scope, maps, storage) {
        var refresh = function () {
            $scope.todos = storage.getAll();
        }

Nahradit mapsSimulator služby v services.js s následujícím kódem z kompletní ukázky.

        .factory("maps", ["$rootScope", "$q", "$window", "$resource", "cordova", function ($rootScope, $q, $window, $resource, cordova) {
            var key = ''; // Add your Bing Maps API key
            var url = 'http://dev.virtualearth.net/REST/v1/Locations/:latitude,:longitude?key='+key;

            return {
                getCurrentPosition: function () {
                    return cordova.ready.then(function () {
                        var deferred = $q.defer();
                        $window.navigator.geolocation.getCurrentPosition(function (successValue) {
                            $rootScope.$apply(function () {
                                deferred.resolve(successValue);
                            });
                        }, function (errorValue) {
                            $rootScope.$apply(function () {
                                deferred.reject(errorValue);
                            });
                        });

                        return deferred.promise;
                    });
                },

                getAddressFromPosition: function (position) {
                    return $resource(url, {})
                        .get({ latitude: position.coords.latitude, longitude: position.coords.longitude })
                        .$promise.then(function(response) {
                            return response.resourceSets[0].resources[0].address.formattedAddress;
                        }, function (error) {
                            return position.coords.latitude + "," + position.coords.longitude
                        });
                }
            }
        }])

Přidat modul plug-in zeměpisná poloha Cordova do aplikace poklepáním config.xml v Průzkumníku řešení a vybrat moduly plug-in karty a výběrem zeměpisná poloha.

Další informace naleznete v tématu Správa modulů plug-in pro aplikace vytvořené s nástroji Visual Studio Tools for Apache Cordova.
Získat klíč Bing Maps a její zahrnutí kde pokyn v aktualizované kódu v services.js.

Přidat mobilních službách Azure

Kompletní ukázky zahrnuje další kód pro ukládání a načítání položek seznamu úloh pomocí mobilních služeb Azure.Tento kód je implementována jako další služby (s názvem azureStorage) v services.js.Tento kód z můžete získat dokončení vzorová aplikace pro, nebo můžete postupujte podle pokynů uvedených zde: Chcete-li přidat službu.

Chcete-li přidat mobilních služeb Azure na aplikaci

Pokud již nemáte, vytvořte účet Microsoft Azure.
Postupujte podle pokynů v Přidat připojené službu přidejte mobilních služeb Azure do své aplikace a vytvářet databáze SQL.

[!POZNÁMKA]

Pokud již nemáte services.js souboru ve vašem projektu, budou přidány po dokončení přidávání připojené služby.Výsledný kód se bude lišit od vzorová aplikace pro seznam úkolů.

V services.js zrušte komentář následující řádky kódu pro službu obecný "úložiště".

            // var azureService = $injector.get('azureStorage');
            // return azureService.isAvailable ? azureService : $injector.get('localStorage');

A odeberte další řádek kódu:

            return $injector.get('localStorage');

Po uncommenting kód a odebrání zadaný kód, kódu služby obecný "úložiště" bude vypadat takto.

        .factory("storage", ["$injector", function ($injector) {
            var azureService = $injector.get('azureStorage');
           return azureService.isAvailable ? azureService : $injector.get('localStorage');

        }])

V services.js, přidejte kód pro Azure služeb, je-li indikován komentářů v kódu.

        // To support Azure, add Azure storage service
        // code here ("azureStorage").

        .factory("azureStorage", ["$q", "$resource", "$rootScope", "guidGenerator", function ($q, $resource, $rootScope, guidGenerator) {
            var azureMobileServicesInstallationId = guidGenerator();
            var azureMobileServicesKey = ''; // Add your Azure Mobile Service Application Key
            var azureMobileServicesAddress = ''; // Add your Azure Mobile Service Application URL
            var azureMobileServicesTableAddress = azureMobileServicesAddress + 'tables/todoitem/:id';
            var headers = {
                'X-ZUMO-APPLICATION': azureMobileServicesKey,
                'X-ZUMO-INSTALLATION-ID': azureMobileServicesInstallationId,
                'X-ZUMO-VERSION': 'ZUMO/1.0 (lang=Web; os=--; os_version=--; arch=--; version=1.0.20218.0)',
                'Content-Type':'application/json'
            };

            var toDoItem = $resource(azureMobileServicesTableAddress, { id: '@id' }, {
                'query': {
                    method: 'GET',
                    params: { $top: '1000' },
                    isArray: true,
                    headers: headers
                },
                'delete': {
                    method: 'DELETE',
                    headers: headers
                },
                'save': {
                    method: 'POST',
                    headers: headers
                },
                'update': {
                    method: 'PATCH',
                    headers: headers
                }
            });


            var azureStorage = {
                getAll: function () {
                    return toDoItem.query();
                },

                create: function (text, address) {
                    var item = new toDoItem({
                        text: text,
                        address: address,
                        done: false
                    });

                    return item.$save();
                },

                update: function (item) {
                    return item.$update();
                },

                del: function (item) {
                    return item.$delete();
                },
            };

            Object.defineProperty(azureStorage, "isAvailable", {
                enumerable: false,
                get : function(){ return azureMobileServicesKey && azureMobileServicesAddress; },
            });

            return azureStorage;
        }])

Získat klíč aplikace mobilních služeb Azure a adresu URL, který je přidružen k vašemu účtu Azure a zahrnout je-li řízené v předchozím kódu.
Přidat modul plug-in mobilních služeb Azure Cordova do aplikace poklepáním config.xml v Průzkumníku řešení a vybrat moduly plug-in karty a výběrem Azure Mobile Services Client.

Další informace naleznete v tématu Správa modulů plug-in pro aplikace vytvořené s nástroji Visual Studio Tools for Apache Cordova.

Sdílet prostřednictvím

Vytvoření ukázkové aplikace se seznamem úkolů

Požadované součásti

Vytvořte projekt

Vytvoření uživatelského rozhraní

Přidání kódu pro seznam

Přidat odkaz na knihovnu Cordova

Přidat informace o stylu CSS

K vytvoření a spuštění aplikace.

Přidat do projektu AngularJS framework

Chcete-li přidat AngularJS do svého projektu

Aktualizovat odkazy skriptu

Registruje moduly aplikace

Chcete-li zaregistrovat úhlová modulů

Přidat datový model

Chcete-li přidat kód pro datový model

Přidání logiky zobrazení do aplikace a implementaci vazby dat

Chcete-li přidat správce

Chcete-li přidat direktivu pro vazbu dat

Vytvoření a spuštění aplikace

K vytvoření a spuštění aplikace.

Přidat služby Bing Maps

Chcete-li přidat Bing Maps podpory k aplikaci:

Přidat mobilních službách Azure

Chcete-li přidat mobilních služeb Azure na aplikaci

Další materiály