2016-09-23 2 views
1

Ich habe eine einfache HTML-Datei in eckigen gemacht. Ich möchte mein Formular mit MongoDB verbinden.AngularJS Verbindung mit MongoDB

Ich habe meine "html-Datei" und "JS-Datei" beigefügt.

HTML-Datei

var app = angular.module('example',[]); 
 

 
app.controller('TestController', function(){ 
 

 
\t $scope.user.name= "Hello"; 
 
\t $scope.user.mail = "[email protected]"; 
 
});
<html> 
 
</!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>TEST Page</title> 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

</head> 
<body ng-app="example" ng-controller="TestController"> 
<table> 
    <tr> 
     <td>Name:</td> 
     <td><input type="text" ng-model="user.name"></td> 
    </tr> 
    <tr> 
     <td>Email:</td> 
     <td><input type="text" ng-model="user.mail"></td> 
    </tr> 
    <tr> 
     <td colspan="2"><button ng-click="getData()"></button></td> 
    </tr> 
</table> 
</body> 
</html> 

mir bitte helfen ......

+0

Sie eine serverseitige Sprache verwenden, wie php, das zu tun. und du musst $ http verwenden, um eine Verbindung zur serverseitigen Sprache herzustellen. –

+0

du musst serverseitigen Code schreiben, um das zu tun oder du kannst BAAS wie Firebase oder Loopback verwenden –

+0

Kannst du einfach deine Erklärung ausarbeiten, indem du den Code Snippet –

Antwort

0

Daten Um von mongodb Sie einen Server haben müssen (mit Ihrem Mongo-Modell), das den Client zu Grep berechtigt die Daten und gibt es an den Client zurück. Weil wir dem Client nicht vertrauen.

Ihr Ansatz besteht darin, eine serverlose Anwendung zu erstellen. Sie können angularjs mit Firebase zum Beispiel verwenden.

martin fowler serverless articles

0

Es scheint, dass Sie in AngularJS und MongoDB neu sind.

Lassen Sie mich versuchen zu erklären, wie sie alle funktionieren.

Communication with $http Zu get/post Daten from/to Server.

var app = angular.module('example',[]); 
app.controller('TestController',['$scope', '$http', function ($scope, $http) { 
    //Get data from server 
    $http.get("server.php") 
     .then(function(response) { 
      //First function handles success 
      $scope.content = response.data; 
     }, function(response) { 
      //Second function handles error 
      $scope.content = "Something went wrong"; 
    }); 
}); 

Server.php wird mit der Datenbank kommunizieren und zu Angular (Client) senden.

//$data will be from database 
return json_encode($data); 

AngularJS ist ein JavaScript-Framework (Client)

  • Es kann mit einem <script> Tag zu einer HTML-Seite hinzugefügt werden.
  • Es ist eine Bibliothek in JavaScript geschrieben.

MongoDB (Database Server)

  • MongoDB ist eine Open-Source-Datenbank, die ein dokumentenorientierte Datenmodell verwendet.

Jetzt benötigen Sie einen Server zum Kommunizieren/Erstellen einer Webanwendung. Heutzutage können PHP/NodeJs verwendet werden, um eine Webanwendung zu erstellen.

AngularJS + PHP

Nur wenige der Referenzen

CRUD example with AngularJs+PHP+MongoDB

AngularJs example with PHP

10 AngularJs CRUD examples

AngularJS + NodeJS + mongodb

Todo App with NodeJs + AngularJs

+0

Vielen Dank für Ihre positive Antwort .... Aber können Sie bitte erklären den Code für "content.php", dass Sie habe enthalten. –

+0

@JunedLaliwala: Kein Problem, ich habe bereits einige der Beispiele in meiner Antwort für Ihre Referenz. –

+0

Siehe Ich habe eine Sammlung in MongoDB erstellt .... Innerhalb dieser Sammlung "mycol" (Name der Sammlung) .... Ich habe einige Werte definiert ...... wenn ich versuche, auf diese Sammlung Werte zuzugreifen .. .... Ich erhalte die Nachricht im Browser wie folgt: "Es sieht so aus, als ob Sie versuchen, über den nativen Treiberport auf MongoDB zuzugreifen." ......... Meine URL lautet: "http:// localhost: 27017/myDB/mycol/" –

1

Wenn Sie beginnen mongod mit dem --rest Parameter Sie Ihre DB-Sammlungen über RESTful Endpunkte wie zugreifen:

http://ip:port/database/collection/?filter_name=filter_param 

So können Sie eine AJAX-Anforderung machen und die erforderlichen Daten als JSON erhalten

Für weitere Informationen prüfen die https://docs.mongodb.com/ecosystem/tools/http-interfaces/#rest-interfaces

+0

Ich habe dies versucht, aber ich bekomme die Nachricht als "Es sieht aus wie Sie versuchen, über den nativen Treiberport auf MongoDB zuzugreifen. "Ich habe die Sammlungen und innerhalb der Sammlungen habe ich auch einige Werte definiert. –

+0

http: // localhost: 27017/myDB/mycol / –