Question

我已经查看了许多教程和堆栈溢出页面，但没有一个解决方案适合我。基本上，我需要在将数据传递给模板之前从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>

Answer 1

您没有加载控制器或模块名称'data'

Answer 2

为服务，常量或其他内容添加代码或删除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';
    }
     }
    }])

在渲染模板

2 个答案: