Créer l'exemple d'application ToDoList

Article
06/10/2015

Dans ce didacticiel, vous allez apprendre comment créer un exemple d'application de liste de tâches en utilisant AngularJS (AngularJSToDo). Cette application permet aux utilisateurs de créer des tâches, de les marquer comme étant effectuées et de les supprimer. L'application stocke également les tâches à l'aide du stockage web HTML5 sur l'appareil. (L'exemple complet utilise Microsoft Azure Mobile Services pour stocker les données, ainsi que Bing Cartes pour fournir des adresses valides). Cet exemple utilise du code JavaScript, mais vous pouvez également écrire votre application Cordova en TypeScript.

Notes

Pour obtenir une vue d'ensemble de tâches nécessaires à la génération d'une application Cordova, voir Créer une application Apache Cordova.

L'exemple d'application de liste de tâches est disponible pour plusieurs infrastructures et peut être téléchargée ici :

Pour télécharger d'autres exemples pour Visual Studio Tools for Apache Cordova qui illustrent la navigation multipage et d'autres fonctionnalités, consultez l'exemple de page maître/détails AngularJS et le modèle d'application de navigation WinJS.

Dans ce didacticiel, vous allez procéder comme suit :

Créer un projet
Créer l'interface utilisateur
Ajouter l'infrastructure AngularJS
Inscrire les modules de l'application
Ajouter le modèle de données
Ajouter la logique d'affichage et la liaison de données
Générer et exécuter l'application ToDo List
Ajouter des services Bing Cartes
Ajouter Azure Mobile Services

Conditions préalables

Avant de pouvoir créer un projet, assurez-vous que vous disposez de la configuration système requise et que vous avez installé l'extension Visual Studio Tools for Apache Cordova. Pour plus d'informations, voir Installer Visual Studio Tools for Apache Cordova.

Créer un projet

Créez un projet Cordova dans Visual Studio en suivant la procédure décrite dans Create Your First Hello World App. Vous pouvez également commencer avec une nouvelle application vide en choisissant Fichier, Nouveau, puis Projet dans Visual Studio. Dans la boîte de dialogue Nouveau projet, choisissez Installé, Modèles, JavaScript, Applications Apache Cordova, puis le modèle Application vide.

Créer l'interface utilisateur

L'interface utilisateur principale de l'exemple d'application de liste de tâches se compose des éléments suivants :

un élément <input> pour les nouveaux éléments de liste ;
un modèle AngularJS destiné à afficher chaque tâche dans la liste des tâches.

L'élément <input> se présente ainsi :

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

Quand vous exécutez l'application pour la première fois, certains attributs du code précédent sont inopérants. Par exemple, la directive AngularJS ng-model autorise une liaison de données bidirectionnelle et permet l'enregistrement de la tâche entrée lors de l'exécution de la fonction addToDo().

Pour la liste des tâches, nous définissons un modèle utilisant certains éléments <div> imbriqués qui encapsulent plusieurs autres éléments. Par exemple, l'élément <input> imbriqué présenté ici sert à afficher chaque chaîne de tâche.

<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>

Dans le code précédent, l'attribut AngularJS, ng-repeat, permet de définir le premier élément <div> comme modèle pour afficher les éléments de la liste des tâches. Ensuite, quand vous joindrez des données réelles et exécuterez l'application, ng-repeat ajoutera l'élément <div> enfant (templateContainer) et ses éléments enfants au DOM pour chaque élément stocké de la liste des tâches.

Notes

Dans la mesure où Cordova ne dépend d'aucune infrastructure JavaScript particulière, vous ne trouverez pas dans ces étapes des informations détaillées sur la programmation AngularJS.À la place, nous montrons un exemple judicieux de la manière de créer une application interplateforme à l'aide de Visual Studio Tools for Apache Cordova.

À présent, nous allons ajouter le balisage complet pour index.html.

Ajouter le balisage pour la liste

Ouvrez index.html et remplacez l'élément <body> par le code suivant.

<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>

Pour l'heure, les autres attributs AngularJS spécifiés dans index.html ne produisent aucun effet lors de l'exécution de l'application. Ils ne deviennent utiles qu'après avoir ajouté l'infrastructure AngularJS (dans les étapes suivantes). Voici les autres attributs AngularJS inclus dans index.html :

directive ng-app pour spécifier le nœud racine d'une application AngularJS ;
ng-controller pour spécifier le contrôleur AngularJS afin qu'il prenne en charge MVC.

L'élément <body> par défaut du modèle Application vide incluait une référence Apache Cordova et une référence à platformOverrides.js, que vous avez remplacée. Dans l'étape suivante, vous allez rajouter ces références au fichier, au niveau de l'élément <head>.

Ajouter la référence de la bibliothèque Cordova

Dans index.html, ajoutez les références de script suivantes dans l'élément <head>, avant les autres références de script.
```

<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
```

Ajouter des informations de style CSS

Dans le dossier css, ouvrez index.css et ajoutez les informations de style CSS suivantes pour les éléments et les modèles HTML.

/* 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');
}

Vous pouvez examiner la liste des tâches vide dans l'un des émulateurs pour vérifier que tout est correct. Dans cette étape, vous allez exécuter l'application de liste AngularJSToDo sur Windows ou sur l'émulateur Apache Ripple avec la configuration minimale requise. Si vous préférez tester votre application sur une autre cible, consultez les rubriques suivantes : Exécuter votre application Apache Cordova sur Android, Installer les outils de génération pour iOS et Exécuter votre application Apache Cordova sur Windows Phone.

Pour générer et exécuter l'application

Choisissez Windows-x64, Windows-x86 ou Android dans la liste Plateformes Solution.
Si vous avez choisi la plateforme Android, choisissez un des émulateurs Ripple, comme illustré ici.

Si vous avez choisi une plateforme Windows, vous pouvez exécuter l'application sur la cible de déploiement par défaut, Ordinateur local.
Appuyez sur F5 pour démarrer le débogage, ou sur Maj+F5 pour démarrer sans débogage.

L'illustration suivante donne un aperçu de l'apparence de l'application de liste AngularJSToDo dans l'un des émulateurs Ripple (sans attachement préalable de données réelles).

Conseil

Si vous utilisez un émulateur Ripple et que vous obtenez une erreur indiquant que vous devez installer une nouvelle version du Kit de développement logiciel (SDK) Android, utilisez le Gestionnaire du Kit de développement logiciel (SDK) Android pour l'installer.Sur Windows, SDK Manager.exe se trouve dans C:\Program Files (x86)\Android\android-sdk.

Ajouter l'infrastructure AngularJS à votre projet

Maintenant que vous avez vérifié votre configuration, vous pouvez créer l'application AngularJSToDo. L'application utilise AngularJS pour mettre en œuvre le modèle MVC, pour fournir la liaison de données et pour prendre en charge l'interface utilisateur native pour les différentes plateformes.

Pour ajouter AngularJS à votre projet

Sur le site web d'AngularJS, choisissez Télécharger.

Dans la boîte de dialogue Download AngularJS, assurez-vous que la version 1.2.x « Minified » d'AngularJS (la version par défaut) est sélectionnée, puis choisissez Download pour enregistrer le script angular.min.js sur votre ordinateur.
Dans la boîte de dialogue Download AngularJS, choisissez Browse additional modules et téléchargez angular-resource.min.js.
Dans l'Explorateur de solutions de Visual Studio, ajoutez un nouveau dossier sous le dossier scripts du projet et nommez-le frameworks.

Notes

Vous ne pouvez pas ajouter ce dossier pendant que l'application est en cours d'exécution.Appuyez sur Maj+F5 pour arrêter le débogueur.
Ouvrez le menu contextuel du nœud frameworks et choisissez Ajouter, puis Élément existant. Ajoutez les deux fichiers d'AngularJS des étapes 1 et 2 au projet.

Mettre à jour les références de script

Dans index.html, ajoutez les références AngularJS suivantes dans l'élément <head>, après les références de script Cordova et platformOverrides.

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

Vos références de script dans l'élément <head> doivent maintenant ressembler à ceci.

    <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>

Notes

cordova.js doit se charger avant les fichiers d'infrastructure AngularJS.

Ajoutez les références de script de vos modules AngularJS à la fin de l'élément <body>. Voici maintenant comment doivent se présenter ces références :

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

Inscrire les modules de l'application

Dans cette section, vous allez inscrire les modules de l'application AngularJS en vue de traiter différents problèmes d'application. Pour assurer la prise en charge de la liaison de données, cette application comprend plusieurs modules, à savoir, le modèle de données (xPlat.services), le contrôleur AngularJS (xPlat.controller) et les directives AngularJS (xPlat.directives). Pour inscrire les modules, utilisez la fonction angular.module.

Pour inscrire des modules Angular

Dans l'Explorateur de solutions, ouvrez le menu contextuel du dossier scripts, puis choisissez Ajouter, Nouvel élément.
Dans la boîte de dialogue Ajouter un nouvel élément, choisissez Fichier JavaScript et nommez-le services.js.
Répétez l'étape 2 pour ajouter deux autres fichiers JavaScript au dossier scripts :
- controllers.js
- directives.js

Ouvrez index.js et remplacez le code par défaut par le code suivant.

(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']);
})();

Ajouter le modèle de données

Le modèle de données est représenté par le module xPlat.services, que vous allez implémenter dans le fichier services.js. Ce code inclut un service qui fournit un stockage local des éléments de la liste des tâches à l'aide du stockage web HTML5 (propriété localStorage). Dans cette implémentation initiale, l'application fournit également du code générique pour les services Bing Cartes, qui peuvent être implémentés ultérieurement. L'exemple d'application complet utilise également Azure pour stocker des données.

Dans le code suivant, l'application appelle la méthode de fabrique du module xPlat.services pour générer chaque service de modèle de données, tel que le service localStorage. Une chose à noter ici est l'inclusion du composant de service $q dans la fonction de fournisseur de service. Cet objet permet une programmation asynchrone, si bien que vous pouvez créer un objet promise à l'aide de $q.defer. L'objet promise vous permet de résoudre ou de rejeter l'opération asynchrone quand elle est arrivée à son terme.

Pour ajouter du code pour le modèle de données

Dans le dossier scripts, ouvrez services.js et ajoutez le code suivant.

(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 };
        }]);
})();

Ajouter la logique d'affichage de l'application et implémenter la liaison de données

Dans cette section, vous allez implémenter le module du contrôleur AngularJS (xPlat.controllers) pour gérer la logique d'affichage et manipuler le modèle de données. Le code implémente des fonctions déclaratives dans le code HTML, comme addToDo, qui ajoute un nouvel élément de tâche à la liste. Dans cette section, vous allez également ajouter une directive AngularJS pour faciliter l'implémentation d'une liaison de données bidirectionnelle.

Un aspect important de ce code est l'utilisation de $scope pour assurer la synchronisation entre le modèle de données et la vue. Par exemple, en spécifiant $scope.addToDo = function () {}, la méthode addToDo devient disponible pour la liaison déclarative dans la vue (index.html).

Pour ajouter le contrôleur

Dans le dossier scripts, ouvrez controllers.js et ajoutez le code suivant.

Le nom du contrôleur, ToDoCtrl, est également référencé par la directive AngularJS ng-controller dans 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();
        }]);
})();

Ensuite, vous allez implémenter le module de directives. Dans ce code, vous allez créer une directive personnalisée pour spécifier le comportement de l'événement DOM onchange. Au moment de l'exécution, ce code associe le gestionnaire d'événements approprié (déclaré dans le balisage HTML du fichier index.html) à l'élément (la fonction addToDoText ou changeToDoText). Celles-ci sont implémentées dans controllers.js.

Pour ajouter une directive pour la liaison de données

Dans le dossier scripts, ouvrez directives.js et ajoutez le code suivant.

(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);
                        });
                    });
                }
            };
        });
})();

Générer et exécuter votre application

Dans cette étape, vous allez exécuter l'application de liste AngularJSToDo sur Windows ou sur l'émulateur Apache Ripple.

Pour générer et exécuter l'application

Appuyez sur F5 pour exécuter l'application sur la cible que vous avez spécifiée précédemment. Les exigences de Windows et de l'émulateur Ripple en matière d'installation étant minimes, nous vous recommandons de commencer par cibler l'une de ces deux plateformes.

L'illustration suivante montre un exemple de ce à quoi ressemble l'application de liste AngularJSToDo dans un des émulateurs Ripple.

Ajouter des services Bing Cartes

L'exemple complet inclut un service Bing Cartes pour associer votre adresse actuelle à chaque élément de la liste des tâches.

Pour ajouter la prise en charge de Bing Cartes à l'application :

Remplacez la fonction getAddress dans controllers.js par le code suivant provenant de l'exemple complet.

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

Remplacez les deux références mapsSimulator dans controllers.js par des références maps.

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

Remplacez le service mapsSimulator dans service.js par le code suivant provenant de l'exemple complet.

        .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
                        });
                }
            }
        }])

Ajoutez le plug-in Cordova Geolocation à l'application en double-cliquant sur config.xml dans l'Explorateur de solutions, en choisissant l'onglet Plug-ins, puis en choisissant Geolocation.

Pour plus d'informations, voir Gérer les plug-ins pour les applications générées à l'aide de Visual Studio Tools for Apache Cordova.
Procurez-vous une clé Bing Cartes et incluez-la selon les instructions dans le code mis à jour de services.js.

Ajouter Azure Mobile Services

L'exemple complet inclut du code supplémentaire pour stocker et récupérer des éléments de la liste des tâches à l'aide de Azure Mobile Services. Ce code est implémenté sous la forme d'un service supplémentaire (nommé azureStorage) dans services.js. Vous pouvez obtenir ce code dans l'exemple d'application complet ou vous pouvez suivre les instructions suivantes pour ajouter le service.

Pour ajouter Azure Mobile Services à l'application

Si vous n'en avez pas déjà un, créez un Compte Microsoft Azure.
Suivez les instructions permettant d'ajouter un service connecté pour ajouter Azure Mobile Services à votre application, et créer une base de données SQL.

Notes

Si vous ne disposez pas déjà d'un fichier services.js dans votre projet, il sera ajouté quand vous aurez fini d'ajouter le service connecté.Le code résultant est différent de l'exemple d'application ToDoList.

Dans services.js, supprimez les marques de commentaire des lignes de code suivantes pour le service de « stockage » générique.

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

Supprimez aussi la ligne de code suivante :

            return $injector.get('localStorage');

Après la suppression des marques de commentaire du code et la suppression du code spécifié, le code du service de « stockage » générique ressemble à ceci.

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

        }])

Dans services.js, ajoutez le code pour le service Azure là ou l'indiquent les commentaires du code.

        // 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;
        }])

Procurez-vous la clé et l'URL d'application Azure Mobile Services associée à votre compte Azure, puis incluez-les selon les instructions dans le code précédent.
Ajoutez le plug-in Cordova Azure Mobile Services à l'application en double-cliquant sur config.xml dans l'Explorateur de solutions, en choisissant l'onglet Plug-ins, puis en choisissant Azure Mobile Services Client.

Pour plus d'informations, voir Gérer les plug-ins pour les applications générées à l'aide de Visual Studio Tools for Apache Cordova.

Partager via

Créer l'exemple d'application ToDoList

Conditions préalables

Créer un projet

Créer l'interface utilisateur

Ajouter le balisage pour la liste

Ajouter la référence de la bibliothèque Cordova

Ajouter des informations de style CSS

Pour générer et exécuter l'application

Ajouter l'infrastructure AngularJS à votre projet

Pour ajouter AngularJS à votre projet

Mettre à jour les références de script

Inscrire les modules de l'application

Pour inscrire des modules Angular

Ajouter le modèle de données

Pour ajouter du code pour le modèle de données

Ajouter la logique d'affichage de l'application et implémenter la liaison de données

Pour ajouter le contrôleur

Pour ajouter une directive pour la liaison de données

Générer et exécuter votre application

Pour générer et exécuter l'application

Ajouter des services Bing Cartes

Pour ajouter la prise en charge de Bing Cartes à l'application :

Ajouter Azure Mobile Services

Pour ajouter Azure Mobile Services à l'application

Ressources supplémentaires