無法讓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在呈現模板之前等待數據

回答

相關問題