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

我看了很多教程和堆栈溢出页面,但没有解决scheme为我工作。 基本上,我需要在将数据传递给模板之前从Firebase获取数据。 这可能也可能不重要,但我在后端使用nodejs和ejs。 但问题是与angular1

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> 

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

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

getLeadersData函数放到名为'data'的服务上,然后用它把你的数据库数据传给控制器和查看。

在模板中,您可以使用ng-if指令在准备好data时渲染模板的一部分

如果您想在将来使用angular度编辑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'; } } }])