【问题标题】:Single Angular Controller w/ multiple $HTTP Get request带有多个 $HTTP Get 请求的单个 Angular 控制器
【发布时间】:2017-05-08 13:02:24
【问题描述】:

我的服务器端运行了两个猫鼬模式。我想在我的 app.js 中添加两个$http.get 请求,并最终在网页上显示我在 MongoDB 中的集合中的两个表。只调用了一个get 函数而没有错误。

server.js

//Data Schema
var tempSchema = new mongoose.Schema({
    topic: String,
    message: Number,
    when: Date
}, {collection: "temperature"});

var humiditySchema = new mongoose.Schema({
    topic: String,
    message: Number,
    when: Date
}, {collection: "humidity"});

var temperature =mongoose.model('temperature', tempSchema);
var humidity =mongoose.model('humidity', humiditySchema);

app.js

app.controller("FormController", function ($http, $scope){
    $http.get("/api/temperature")
        .then(function (response) {
            $scope.temperatures = response.data;
        });
})

app.controller("FormController", function ($http, $scope){
    $http.get("/api/humidity")
        .then(function (response) {
            $scope.humiditys = response.data;
        });
})

还考虑如何在网页上显示这两个集合。使用ng-repeat。不幸的是,我无法在此处粘贴我的 HTML 代码。

如果能得到任何帮助,我将不胜感激。谢谢

【问题讨论】:

  • 你已经定义了两次FormController。
  • 索引是否与应该放在一起的数据匹配?所以temperatures[0] 会和humiditys[0] 一起使用?
  • @jbrown 我应该删除他们吗?
  • 您应该将 ajax 调用放在服务中而不是控制器中
  • @ProfessorAllman 对不起,先生,我对这个平台还很陌生,请您说的更清楚一点。

标签: javascript angularjs node.js routing mongoose-populate


【解决方案1】:

另一种处理 $http 请求的方法是创建一个 Angular 工厂。

angular.module('myApp.services',[])

add.factory('ApiService', function($http) {
    return {
        getHumidity: function() {
            return $http.get("/api/humidity");
        },
        getTemperature: function() {
            return $http.get("/api/temperature");
        }
    }
})

然后在你的控制器中,你应该做以下事情(注意你必须注入工厂作为控制器的依赖)

angular.module('myApp.controllers',[])
    .controller("FormController", function (ApiService, $scope){
         function getHumidity() {
            var promise = ApiService.getHumidity();
            promise.then(
                function(response) {
                    $scope.humiditys = response.data;
                },
                function(errorPayload) {
                    console.log(errorPayload);
                });
        };

        function getTemperature() {
            var promise = ApiService.getTemperature();
            promise.then(
                function(response) {
                     $scope.temperatures = response.data;
                },
                function(errorPayload) {
                    console.log(errorPayload);
                });
        };

        getHumidity();
        getTemperature();

    })

然后你在哪里定义你的 Angular 应用程序(大多数情况下是 app.js):

angular.module('myApp', ['myApp.controllers','myApp.services'])
    .run(...)
    .config(...)
    ...

【讨论】:

  • 我是否将 Angular 工厂创建为单独的 JS 文件?
  • 功能上讲是一样的。但就最佳实践而言,您最好创建一个新文件。
  • 好的我刚刚添加了创建一个单独的JS文件并添加了代码的第一部分。还有什么我需要补充的吗?只是想确保我做对了。
  • 再次检查,我更新了答案只是为了更清楚。
  • 非常感谢您的帮助。但我必须说我觉得我应该把文件放在上面的位置有点困惑。我将不胜感激。
猜你喜欢
  • 2019-06-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-12-20
  • 1970-01-01
  • 2023-03-06
  • 2018-12-11
  • 1970-01-01
相关资源
最近更新 更多