无法让Angularjs在渲染模板之前等待数据答案

【问题标题】：Can't get Angularjs to wait for data before rendering template无法让Angularjs在渲染模板之前等待数据
【发布时间】：2017-02-17 20:49:37
【问题描述】：

我查看了许多教程和堆栈溢出页面，但没有一个解决方案适合我。基本上，在将数据传递给模板之前，我需要从 firebase 获取数据。这可能重要也可能不重要，但我在后端使用 nodejs 和 ejs。但问题在于 Angular 1

代码

angular.module("example", ["elif", "ngRoute"])


.config(['$routeProvider',
    function($routeProvider) {
    $routeProvider
        .when("/leaders", {
            templateUrl: "leaders",
            controller: 'LeadersController',
            resolve: {
                data: function () {
                    return getLeadersData();
                }
            }
        });

    }])


.controller('LeadersController', ["$scope", "$http", "$location", "$window", 'data',
    function($scope, $http, $location, $window, data)
    {
        $scope.data = data;
    }]);

function getLeadersData()
{
  // firebase does its thing and returns data fine here, it is an array of objects where each object has a few things in it
}

但是我已经使用不同的指南重做了大约 15 次或更多此代码，并且我一遍又一遍地遇到相同的错误。我得到的最常见的相同错误是

"Error: [$injector:unpr] Unknown provider: dataProvider <- data <- LeadersController

我现在不知道该怎么做。

编辑：添加 html，这个 html 是基本网页，删除了其他内容，确切的错误发生在这个

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/stylesheets/flickerFix.css">
    <script src="/jquery/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>

        <title>Leaders</title>
        <link rel="stylesheet" type="text/css" href="/stylesheets/nav.css" />
        <link rel="stylesheet" type="text/css" href="/stylesheets/leaders.css" />
        <script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script>
        <!--<script src="/angular/angular.js"></script>-->
        <script data-require="angular.js@1.3.x" data-semver="1.3.0" src="https://code.angularjs.org/1.3.0/angular.js" ></script>
        <script data-require="angular-route@1.3.0" data-semver="1.3.0" src="https://code.angularjs.org/1.3.0/angular-route.js"></script>
        <script src="/js/firebase/firebase.js"></script>
    <!-- angular fire not used -->
        <script src="/angularfire/angularfire.js"></script>
        <script src="/elif/elif.js"></script>
        <script src="/js/angular/LeadersController.js"></script>
    </head>

    <body ng-app="example">
        <div class="container-fluid" id="wrapper" >
            <p id="header">Leaders</p>
            <div class="container" ng-controller="LeadersController" >
                <h1>name:  {{ leaders[0].name }}</h1>
                <h1>name:  {{ JSON.stringify(leaders)}}</h1>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

看起来类似于问题stackoverflow.com/questions/30107574/…
参考更新后的 Plunker (plnkr.co/edit/3SsQGRnRpryCHzYF5mKB?p=preview) 并确保您没有在 HTML 中使用 ng-controller。另外如何使用 ng-view 参考w3schools.com/angular/angular_routing.asp 了解详情

标签： javascript angularjs node.js firebase

【解决方案1】：

您没有加载控制器或模块名称“数据”

【讨论】：

你能解释一下怎么做吗？我一直在学习教程，我还没有看到任何其他我认为它还没有出现在我的代码中的东西，所以如果可以的话，你可以帮助指导我
问题出在 .controller('LeadersController', ["$scope", "$http", "$location", "$window", 'data', function($scope, $http, $location, $window, 数据) { }]);当您从这段代码中删除“数据”和数据时，错误应该消失了。
我一上笔记本电脑就会试试这个，但奇怪的是我看到的每个例子都是这样做的。基本上他们会做
$scope.data = 数据；或对其进行其他修改，例如 $scope.data = data.getData() 假设返回的函数不是实际数据

【解决方案2】：

为服务、常量或其他事物添加代码或删除data 参数。

将getLeadersData 函数放入名为“数据”的服务中，然后使用它将您的数据库数据传递给控制器和视图。

在模板中，当您获得dataready 时，您可以使用 ng-if 指令来渲染模板的一部分

编辑示例代码 如果您将来想使用 Angular，您必须了解服务的使用。服务是 Angular 中最重要的部分之一。

.controller('LeadersController', ["$scope", "$http", "$location", "$window", 'data', function($scope, $http, $location, $window, data)
    {
        $scope.leaders = data.getLeadersData();
        // data being passed in but not used just yet, I get error without it
    }])
.service('data',[function(){
     return {
getLeadersData : function()
    {
      return 'data';
    }
     }
    }])

【讨论】：

我对 Angular 还是很陌生，你能给我看一些示例代码吗
如果你不让它工作 - 准备 plunker，我明天会帮助你。
@Dominik，在控制器中调用函数解决了问题的原始问题，即在渲染模板之前等待数据
@MechanicalCoder not if 他使用 ng-if 等到控制器中有数据，或者在服务中使用承诺。
问题是`在将数据传递给模板之前，我需要从firebase获取数据。`所以我的代码将为此分叉