Question

我正在构建一个使用Ionic作为HMI的移动应用程序。我在AngularJS上遇到麻烦，无法在我的界面和我的数据库之间建立连接。我使用的RESTful API使用Node.JS，＆amp;＆amp; MongoDB作为NoSQL数据库。

从这个Ionic用户界面：

Ionic用户界面的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- pour charger ngResource -->
    <script src="lib/ionic/js/angular/angular-resource.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter" ng-controller="OrganisateurController">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Tests Ionic</h1>
       </ion-header-bar>
       <ion-content>
         <div class="list">

    <label class="item item-input">
   <input placeholder="Organisateur ID" type="number" name="organisateur_id" ng-model="organisateur_id" required >
   </label>

   <label class="item item-input">
   <input placeholder="Nom" type="text" name="nom" ng-model="nom" required >
   </label>

   <label class="item item-input">
   <input placeholder="Raison sociale" type="text" name="raison_sociale" ng-model="raison_sociale" required >
   </label>

   <label class="item item-input">
   <input placeholder="Logo" type="text" name="logo" ng-model="logo" required >
   </label>

   <label class="item item-input">
   <input placeholder="Nom evenement" type="text" name="nom_evenement" ng-model="nom_evenement" required >
   </label>

   <label class="item item-input">
   <input placeholder="Lieu" type="text" name="lieu" ng-model="lieu" required >
   </label>

   <label class="item item-input">
   <input placeholder="Description" type="text" name="description" ng-model="description" required >
   </label>

   <label class="item item-input">
   <input placeholder="Limite de participants" type="text" name="limite_particip_activ" ng-model="limite_particip_activ" required >
   </label>

   <label class="item item-input">
   <input placeholder="Heure de début" type="text" name="Heure_debut" ng-model="Heure_debut" required >
   </label>

   <label class="item item-input">
   <input placeholder="Nom d'activité" type="text" name="nom_activite" ng-model="nom_activite" required >
   </label>

   <label class="item item-input">
   <input placeholder="Date de l'événement" type="text" name="date" ng-model="date" required >
   </label>

   <label class="item item-input">
   <input placeholder="Nom parcours" type="text" name="nom_parcours" ng-model="nom_parcours" required >
   </label>

   <label class="item item-input">
   <input placeholder="Limit" type="number" name="limit" ng-model="limit" required >
   </label>

   <label class="item item-input">
   <input placeholder="Heure" type="text" name="heure" ng-model="heure" required >
   </label>

   <label class="item item-input">
   <input placeholder="Type'" type="text" name="type" ng-model="type" required >
   </label>

   <label class="item item-input">
   <input placeholder="Distance" type="number" name="distance" ng-model="distance" required >
   </label>


   <button class="button" ng-click="saveOrganisateur()">Créer mon profil Organisateur</button>
   <button class="button" ng-click="updateOrganisateur()">Update un organisateur</button>
   <button class="button" ng-click="find(organisateur_id)">Trouver un organisateur</button>
   </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

所以基本上，它只是一个包含一些输入字段的空白页面。并且...最后几个按钮。但我非常有信心我的问题不在于按钮本身，而是更多关于按照它们引用的函数编写的方式。

现在让我们回顾一下我的Angular代码。我在一个文件中获得了所有代码：app.js。

app.js ：

var app = angular.module('starter', ['ionic', 'ngResource'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

app.controller("OrganisateurController", [ '$scope', '$resource',function($scope, $resource) {
                $scope.organisateurs = [];

    $scope.saveOrganisateur = function(){
                    $scope.organisateurs.push({'organisateur_id':$scope.organisateur_id,
                    'nom': $scope.nom,
                    'raison_sociale': $scope.raison_sociale,
                    'logo': $scope.logo,'nom_evenement': $scope.nom_evenement,
                    'lieu': $scope.lieu,'description': $scope.description,
                    'limite_particip_activ': $scope.limite_particip_activ,
                    'Heure_debut': $scope.Heure_debut,
                    'nom_activite': $scope.nom_activite,
                    'date': $scope.date,
                    'nom_parcours': $scope.nom_parcours,
                    'limit': $scope.limit,
                    'heure': $scope.heure,
                    'type': $scope.type,
                    'distance': $scope.distance
                });     
                    // Create a resource class object
                    //
                    var organisateur = $resource('http://pocapi-test.apigee.net/organisateur');
                    // Call action method (save) on the class 
                    //
                    organisateur.save({
                    'organisateur_id':$scope.organisateur_id,
                    'nom': $scope.nom,
                    'raison_sociale': $scope.raison_sociale,
                    'logo': $scope.logo,'nom_evenement': $scope.nom_evenement,
                    'lieu': $scope.lieu,'description': $scope.description,
                    'limite_particip_activ': $scope.limite_particip_activ,
                    'Heure_debut': $scope.Heure_debut,
                    'nom_activite': $scope.nom_activite,
                    'date': $scope.date,
                    'nom_parcours': $scope.nom_parcours,
                    'limit': $scope.limit,
                    'heure': $scope.heure,
                    'type': $scope.type,
                    'distance': $scope.distance
                }, function(response){
                        $scope.message = response.message;
                    });

                    $scope.organisateur_id='';
                    $scope.nom='';
                    $scope.raison_sociale='';
                    $scope.logo = '';
                    $scope.nom_evenement ='';
                    $scope.lieu = '';
                    $scope.description ='';
                    $scope.limite_particip_activ ='';
                    $scope.Heure_debut ='';
                    $scope.nom_activite ='';
                    $scope.date ='';
                    $scope.nom_parcours ='';
                    $scope.limit ='';
                    $scope.heure ='';
                    $scope.type ='';
                    $scope.distance ='';

    }

    $scope.updateOrganisateur = function(){                         
                    // Create a resource class object
                    //
                    var organisateur = $resource('http://pocapi-test.apigee.net/organisateur/:organisateurId', {organisateurId:'@id'});
                    // Create an instance of User resource
                    // By the way I don't know what to put here as organisateurId to get my shit to work 
                    var organisateur = Organisateur.query({organisateurId:25}); 
                    // Update the new values entered in the form fields
                    //
                    organisateur.id = $scope.organisateur_id;
                    organisateur.nom = $scope.nom;                
                    organisateur.raison_sociale = $scope.raison_sociale;
                    organisateur.logo = $scope.logo;
                    organisateur.nom_evenement = $scope.nom_evenement;
                    organisateur.lieu = $scope.lieu;
                    organisateur.description = $scope.description;
                    organisateur.limite_particip_activ = $scope.limite_particip_activ;
                    organisateur.Heure_debut = $scope.Heure_debut;
                    organisateur.nom_activite = $scope.nom_activite;
                    organisateur.date = $scope.date;
                    organisateur.nom_parcours = $scope.nom_parcours;
                    organisateur.limit = $scope.limit;
                    organisateur.heure = $scope.heure;
                    organisateur.type = $scope.type;
                    organisateur.distance = $scope.distance;
                    // Call '$' prefixed action menthod to post ("save" )
                    //
                    organisateur.$save = function(response){
                        $scope.message = response.message;
                    };
                    // Push the new objects in the $scope.users                     
                    //
                    $scope.organisateurs.push({
                    'organisateur_id':$scope.organisateur_id,
                    'nom': $scope.nom,
                    'raison_sociale': $scope.raison_sociale,
                    'logo': $scope.logo,'nom_evenement': $scope.nom_evenement,
                    'lieu': $scope.lieu,'description': $scope.description,
                    'limite_particip_activ': $scope.limite_particip_activ,
                    'Heure_debut': $scope.Heure_debut,
                    'nom_activite': $scope.nom_activite,
                    'date': $scope.date,
                    'nom_parcours': $scope.nom_parcours,
                    'limit': $scope.limit,
                    'heure': $scope.heure,
                    'type': $scope.type,
                    'distance': $scope.distance
                });     

                    $scope.organisateur_id='';
                    $scope.nom='';
                    $scope.raison_sociale='';
                    $scope.logo = '';
                    $scope.nom_evenement ='';
                    $scope.lieu = '';
                    $scope.description ='';
                    $scope.limite_particip_activ ='';
                    $scope.Heure_debut ='';
                    $scope.nom_activite ='';
                    $scope.date ='';
                    $scope.nom_parcours ='';
                    $scope.limit ='';
                    $scope.heure ='';
                    $scope.type ='';
                    $scope.distance ='';    
                 }
}]);

现在，我将向您展示真实的MongoDB对象 - （我实际上使用Ionic和＆amp;＆amp; Angular代码看起来不像那样！） - 我想发布看起来像。因为我在我的范围内获得的数据不是真正的格式，因为我完全不确定如何键入它而不会弄乱我的代码。

它在代码中的外观：

[
  {
    "_id": "58496c312d7e130bbc94853b",
    "organisateur_id": 1,
    "nom": "LEROUX",
    "raison_sociale": "Manager",
    "logo": "DECATHLON",
    "evenement": [
      {
        "nom_evenement": "Cap sur le Sport",
        "lieu": "Cesson-Sévigné, Placis Vert",
        "description": "Quelle équipe sera la meilleure de Cap ? Nous le saurons durant ces difficiles conditions de Décembre !",
        "limit_particip_activ": "150",
        "Heure_debut": "15:00",
        "activites": [
          {
            "nom_activite": "Tennis pour tous",
            "date": "21/12/2016",
            "parcours": [
              {
                "nom_parcours": "DoubleField",
                "limit": 16,
                "heure": "15:30",
                "type": "Tennis",
                "distance": 0
              }
            ]
          }
        ]
      }
    ]
  }
]

它在我的MongoDB数据库中的外观：

现在，当我使用Ionic按钮“Créermonprofil”时，这就是我在MongoDB数据库中发布的内容。提醒一下，该按钮引用saveOrganisateur（）函数：

我们在这里，我想我说过你需要知道的一切，所以你可以帮助我！如果您需要更多信息或对我链接的文件或我向您展示的文件有疑问，请不要犹豫，我会尽快回答。我将每隔30分钟检查一次页面。

如何将我的数据从Ionic发布到我的数据库，而不是每行都没有对象？
如果我们让它工作，我怎样才能格式化我的代码，以对象的实际格式发布数据，“{”，“}”，“[”，＆amp; “]”

尝试使用来自Ionic用户输入界面的Angular，RESTful API来发布数据

0 个答案: