无法让Angularjs在呈现模板之前等待数据

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

代码

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，这个网站是基本的网页，与其他的东西删除了，确切的错误与此

<!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="[email protected]" data-semver="1.3.0" src="https://code.angularjs.org/1.3.0/angular.js" ></script> 
     <script data-require="[email protected]" 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>

来源

2017-02-17 Tanner Summers

类似于发出http://stackoverflow.com/questions/30107574/angularjs-injectorunpr-unknown-provider-dataprovider-data-pagectrl – MechanicalCoder

请参阅更新Plunker（https://plnkr.co/编辑/ 3SsQGRnRpryCHzYF5mKB？p =预览），并确保你的HTML中没有使用ng-controller。另外，如何使用ng-view参考https://www.w3schools.com/angular/angular_routing.asp了解详情 – MechanicalCoder

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

来源

2017-02-17 20:52:24 marcokreeft

你能解释一下怎么做吗？我一直在关闭教程，我还没有看到任何其他的东西，我认为它不在我的代码中，所以如果没关系，你可以帮我指导 –

问题出在.controller（'LeadersController'，[“$ scope （$ scope，$ http，$ location，$ window，data） { }]）;“$ http”，“$ location”，“$ window”，'data'，函数当你从这段代码中删除“数据”和数据时，错误应该消失。 – marcokreeft

我会在我的笔记本电脑上尽快尝试此操作，但足够奇怪我看过的每个示例都是这样做的。基本上他们wpuld做 –

附加发生服务代码，常量或其他东西或删除data参数。

把getLeadersData函数调用服务称为'数据'，然后用它来传递你的数据库数据到控制器和视图。

模板，你可以使用NG-if指令来呈现模板的一部分，当你得到你data准备

编辑WIT样品编号 如果你想用在未来的角度，您必须了解使用服务。服务是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'; 
    } 
    } 
    }])

来源

2017-02-17 21:07:15

我仍然是非常新的角你能告诉我一些示例代码 –

我编辑与样本的答案服务代码。 –

无法让Angularjs在呈现模板之前等待数据

回答

相关问题