【问题标题】：AngularJS. $resource, MongoLab, Restful API - What's wrong with my sample?角JS。 $resource、MongoLab、Restful API - 我的示例有什么问题？
【发布时间】：2014-09-17 11:26:06
【问题描述】：

我是 AngularJS 的新手，在学习它的过程中很喜欢它。我试图弄清楚如何使用 $resource 和 RESTful API 从 AngularJS 与 MongoLab 进行通信。我有以下两个文件：

index.html:
-----------
<!DOCTYPE html>
<html lang="en">
<head>
    <title>MongoLab Connectivity Test</title>
    <script src="angular.js"></script>
    <script src="angular-resource.js"></script>
    <script src="app3.js"></script> 
    <link rel="stylesheet" href="bootstrap.css" />
    <link rel="stylesheet" href="bootstrap-theme.css" />
</head>
<body ng-app="myModule">
    <div ng-controller="display">
      <p>{{data.message}}</p>
    </div>
</body>
</html>

app3.js:
--------
var myModule = angular.module('myModule', ['ngResource']);

myModule.controller('display', function($scope, personService) {
    $scope.data = personService.query();
});

myModule.constant({
            DB_BASEURL: "https://api.mongolab.com/api/1/databases/db1/collections",
            API_KEY: "<MyAPIKey>"
        })

myModule.factory('personService', ['$resource', 'DB_BASEURL', 'API_KEY', 
    function($resource, DB_BASEURL, API_KEY) 
    {
        return $resource
            (DB_BASEURL+'/persons/:id' 
            ,{id: "@id" apiKey: API_KEY}
            );
    }
]);

当我尝试它时，我得到以下输出：

我不确定我做错了什么。希望得到一些帮助。

【问题讨论】：

你在哪里定义 query() 函数？

标签： angularjs mlab

【解决方案1】：

通过 Angular 和 Mongolab REST API 使用 $http 模块

对于 GET 请求，

$http.get('https://api.mongolab.com/api/1/databases/DATABASE_NAME/collections/COLLECTION_NAME?apiKey=YOUR_API_KEY')
  .success(function(data) {
      console.log(data)
    }

对于 POST 请求，

$http.post('https://api.mongolab.com/api/1/databases/DATABASE_NAME/collections/COLLECTION_NAME?apiKey=YOUR_API_KEY', $scope.data, {
    headers: {
      'Content-Type': 'application/json; charset=UTF-8'
    }
  })
  .success(function() {
      console.log('Data saved successfully')
    }

更多关于 http 方法支持文档 - http://docs.mongolab.com/data-api/#reference

【讨论】：

【解决方案2】：

更好的连接方式是：https://github.com/pkozlowski-opensource/angularjs-mongolab

[按原样复制文档中的文本]

使用说明

首先，您需要同时包含 AngularJS 和 angular-mongolab.js 脚本：https://raw.githubusercontent.com/pkozlowski-opensource/angularjs-mongolab/master/src/angular-mongolab.js

然后，需要配置2个参数：

MongoLab key (API_KEY)
database name (DB_NAME)

配置参数需要在应用模块的常量 MONGOLAB_CONFIG 中指定：

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

app.constant('MONGOLAB_CONFIG',{API_KEY:'your key goes here', DB_NAME:'angularjs'});

然后，创建新资源非常非常简单，归结为使用 MongoDB 集合名称调用 $mongolabResource：

app.factory('Project', function ($mongolabResourceHttp) {
    return $mongolabResourceHttp('projects');
});

完成上述操作后，您就可以在服务和控制器中注入和使用新创建的资源了：

app.controller('AppController', function ($scope, Project) {
  Project.all().then(function(projects){
    $scope.projects = projects;
  });
});

另外，您可以在此处查看博客以了解更简单的实现：http://asad.io/angularjs-with-mongolab/

【讨论】：