Dépenses de suivi avec CouchDB et Angular

Ce didacticiel montre la création d'une application de suivi des dépenses à l'aide de CouchDB (une base de données NoSQL) et Angular (un cadre JavaScript). L'aspect unique est l'API HTTP de CouchDB, permettant une communication directe entre le frontend angulaire et la base de données, éliminant le besoin d'un serveur backend séparé.

Nous couvrirons la création d'une petite application étape par étape, avec chaque étape représentée par un engagement (y compris les tests, mais pas détaillé ici). Le code complet est disponible sur github (lien non fourni dans l'original, doit être ajouté si disponible).

Concepts clés:

• API HTTP de CouchDB: Interaction côté client direct via les demandes HTTP simplifie le développement.
• Injection de dépendance d'Angular (DI): gère les dépendances des applications, améliorant la modularité et la testabilité.
• liaison des données bidirectionnelle: synchronise efficacement le modèle et la vue angulaires, assurant la cohérence de l'interface utilisateur avec les données CouchDB.
• Validation côté client et côté serveur: GANDE ANGULAIRE Validation frontale, tandis que CouchDB applique la validation du document pour l'intégrité des données.
• Évolutivité: Le tutoriel présente des techniques comme les directives et la liaison des données pour créer une solution évolutive.

Pourquoi choisir Couchdb?

Alors que les options côté client comme IndededDB et le stockage local existent, un serveur de base de données offre des avantages, en particulier pour les applications collaboratives. Plusieurs utilisateurs peuvent accéder et mettre à jour la liste de dépenses simultanément. Le support HTTP natif de Couchdb élimine les couches intermédiaires, simplifiant la communication entre l'application et la base de données. Son support inhérent à la réplication rend les systèmes de base de données distribués faciles à implémenter.

Prérequis:

Installez le dernier CouchDB (version 1.6 ou version ultérieure) et une version récente de Node.js stable (version 0.10.x ou ultérieure).

Configuration de l'environnement de développement:

1. Installez Node.js et outils: Utilisez un installateur (disponible sur le site Web de Node.js) ou un gestionnaire de packages comme NVM. Installez yo, generator-angular, grunt-cli et couchapp globalement à l'aide de NPM: npm install -g yo generator-angular grunt-cli couchapp

2. Créer et échafaudage l'application angulaire: Créer un répertoire de projet, y accéder et utiliser le générateur angulaire: mkdir expenses && cd expenses && yo angular expenses

3. Exécutez le serveur de développement: Utilisez Grunt pour démarrer un serveur de développement: grunt serve. Cela devrait ouvrir http://127.0.0.1:9000 dans votre navigateur.

4. Installez Couchdb: Suivez les instructions d'installation CouchDB pour votre système d'exploitation. (par exemple, en utilisant brew sur macOS).

Configuration initiale de CouchDB:

1. Démarrer Couchdb: couchdb &

2. Créez la base de données: curl -X PUT http://127.0.0.1:5984/expenses

3. Insérer des documents initiaux: Utilisez curl pour ajouter des exemples de dépenses (des exemples de commandes sont fournies dans le tutoriel d'origine).

Activer CORS:

pour permettre aux demandes d'origine transversale de l'application angulaire à CouchDB, activez les COR dans la configuration de Couchdb (généralement local.ini). Le tutoriel fournit des commandes curl pour activer les COR et définir les origines sur * (pour le développement uniquement; modifier ceci pour la production).

Injection angulaire et de dépendance:

Le tutoriel démontre l'utilisation de l'injection de dépendance d'Angular pour gérer les paramètres de connexion de la base de données. Une constante appSettings est créée pour maintenir l'URL de la base de données.

Remplir des données avec Angular's $http Service:

Une vue CouchDB (_design/expenses/_view/byName) est créée pour récupérer les données de dépenses. Le contrôleur angulaire utilise le service $http pour faire des demandes à cette vue et mettre à jour le $scope avec les données récupérées. Le tutoriel démontre l'utilisation de ng-repeat pour afficher les données dans la vue.

Création et gestion du formulaire de soumission des dépenses:

Un formulaire HTML est ajouté pour permettre aux utilisateurs de prendre de nouvelles dépenses. ng-model Les directives lient les entrées de forme à la portée angulaire. La directive ng-submit appelle une fonction de contrôleur pour envoyer les données à CouchDB à l'aide de $http.post. Des mises à jour optimistes sont utilisées pour fournir des commentaires immédiats à l'utilisateur.

Ajout de validation:

La validation côté serveur est implémentée dans le document de conception CouchDB à l'aide de validate_doc_update. La validation côté client est ajoutée à l'aide des directives d'Angular required et ng-pattern. La validité du formulaire est vérifiée à l'aide de form.$invalid pour désactiver le bouton Soumettre si le formulaire n'est pas valide.

Conclusion:

Le tutoriel conclut en résumant les concepts clés couverts et suggérant d'autres sujets d'exploration, tels que l'hébergement sur CouchDB, les mises à jour de documents, les directives personnalisées, la réplication et les fonctionnalités de vue plus avancées. Une section FAQ est également incluse pour répondre aux questions courantes concernant l'hébergement, en utilisant ensemble javascript / node.js / couchdb, et des recommandations d'installation / hébergement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!