2016-09-23 12 views
1

私は単純なHTMLファイルを1つ作成しました。フォームをMongoDBに接続したい。AngularJSとMongoDBの接続

「htmlファイル」と「JSファイル」が添付されています。

HTMLファイル

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> 

+0

のようにサーバー側の言語を使用する必要があります。それを行うPHP。 $ HTTPを使用してサーバー側の言語に接続する必要があります –

+0

サーバー側のコードを記述するか、firebaseやループバックなどのBAASを使用する必要があります –

+0

コードスニペットを実行して説明を具体化できますか? –

答えて

0

は、サーバーを持っている必要がありMongoDBのからデータを取得するには......私を助けてください(あなたのmongoモデルで)クライアントにgrepを許可するそのデータをクライアントに返します。私たちはクライアントを信頼しないからです。

あなたのアプローチは、サーバーレスアプリケーションを作成することです。例のためにfirebaseを持つangularjsを使うことができます。

martin fowler serverless articles

0

あなたがAngularJsとMongoDBので新しく追加されたようです。

どのように動作するのか説明しましょう。

Communication with $httpget/postデータfrom/toサーバ。

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は、データベースと通信してAngular(クライアント)に送信します。

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

AngularJSそれは<script>タグをHTMLページに追加することができたJavaScriptフレームワーク(クライアント)

  • です。
  • JavaScriptで書かれたライブラリです。

のMongoDB(データベースサーバ)

  • MongoDBは、ドキュメント指向のデータモデルを使用するオープンソースのデータベースです。

これで、Webアプリケーションを通信/作成するサーバーが必要になりました。今日では、PHP/NodeJsを使用してWebアプリケーションを作成できます。

AngularJs + PHP

参照数

CRUD example with AngularJs+PHP+MongoDB

AngularJs example with PHP

10 AngularJs CRUD examples

AngularJs + NodeJs + MongoDBの

Todo App with NodeJs + AngularJs

+0

あなたの肯定的な応答をありがとう....しかし、あなたは "content.php"のコードを説明してください含まれています。 –

+0

@JunedLaliwala:問題はありません。参考までに私の答えの例はほとんどありません。 –

+0

私はMongoDBで1つのコレクションを作成しました。そのコレクション "mycol"(コレクションの名前)の中に....コレクション値にアクセスしようとしているときにいくつかの値を定義しました。 ....私は、ブラウザに次のようなメッセージを表示しています。「ネイティブのドライバポートでHTTP経由でMongoDBにアクセスしようとしているようです。」........私のURLは「http:/localhost:27017/myDB/mycol/" –

1

あなたは--restパラメータでのmongodを起動する場合は、次のようにRESTfulなエンドポイントを経由して、あなたのDBコレクションにアクセスすることができますので、あなたはAJAXリクエストを作成し、JSONなど必要なデータを取得することができます

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

詳細については、https://docs.mongodb.com/ecosystem/tools/http-interfaces/#rest-interfaces

+0

私はこれを試しましたが、メッセージが「あなたのように見えます。ネイティブのドライバポート上でHTTP経由でMongoDBにアクセスしようとしています。 "私はコレクションを持っており、コレクション内にいくつかの値も定義しています。 –

+0

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