未知提供商错误 hoteldatafactory <- hoteldatafactory

Question

我收到一个错误：[$injector:unpr] Unknown provider: hotelDataFactoryProvider <- hotelDataFactory，似乎是在依赖注入的某处有问题。

错误是

未捕获的语法错误：意外的标记： angular.js:14362 错误：[$injector:unpr] 未知提供者：hotelDataFactoryProvider <- hotelDataFactory

at Object.getService [as get] 
at getService 
at injectionArgs 
at Object.instantiate 
at $controller 
at Object.link 
at  <div ng-view="" class="ng-scope">

酒店数据-factory.js

  angular.module('meanhotel')
    .factory('hotelDataFactory', hotelDataFactory);

    function hotelDataFactory($http)
    {
    return
    {
        hotelList: hotelList,
        hotelDisplay : hotelDisplay
    };

    function hotelList() 
    {
    return $http.get('/api/hotels').then(complete).catch(failed);
    }

    function hotelDisplay(id)
    {
    return $http.get('/api/hotels/'+id).then(complete).catch(failed);
    }

    function complete(response)
    {
    return response.data;

    }

    function failed(error)
    {
    return error.statusText;
    }   
    }

app.js

    angular.module('meanhotel',['ngRoute'])
    .config(config);

    function config($routeProvider,$locationProvider)
    {

    $locationProvider.hashPrefix('');

    $routeProvider
    .when('/' ,{
    templateUrl:'angular-app/hotel-list/hotels.html',
    controller:HotelsController,
    controllerAs:'vm'
    })

    .when('/hotel/:id', {   
    templateUrl:'angular-app/hotel-display/hotel.html',
    controller:HotelController,
    controllerAs:'vm'
    });

    }

index.html

    <!DOCTYPE html>

    <!-- test-->
    <html ng-app="meanhotel">
    <head>
      <title>MEAN hotel</title>
      <link href="css/bootstrap.min.css" rel="stylesheet"/>
      <link href="css/custom.css" rel="stylesheet"/>
    </head>
    <body>

    <div ng-view></div>

      <footer class="footer">
        <div class="container">
          <p class="text-muted text-center">
            <a href="http://fullstacktraining.com" target="_blank"><img src="/images/fullstacktraining_logo.png" height="26" alt="Full Stack Training"/></a>
          </p>

          <p class="text-muted text-center">
            <small>&copy; 2015 Full Stack Training Ltd</small>
          </p>
        </div>
      </footer>

      <script src="jquery/jquery-3.1.1.min.js"></script>
      <script src="node_modules/angular/angular.js"></script>
      <script src="node_modules/angular-route/angular-route.js"></script>
      <script src="angular-app/app.js"></script>
      <script src="angular-app/hotel-data-factory/hotel-data-factory.js"></script>
      <script src="angular-app/hotel-list/hotel-list-controller.js"></script>
      <script src="angular-app/hotel-display/hotel-display-controller.js"></script>

    </body>
    </html>

酒店-display.js

    angular.module('meanhotel')
    .controller('HotelController', HotelController);

    function HotelController(hotelDataFactory,$routeParams)
    {
        var vm=this;
        var id=$routeParams.id;

            hotelDataFactory.hotelDisplay(id).then(function(response)
            {
                vm.hotel=response;

            });
    }

酒店-list.js

    angular.module('meanhotel')
    .controller('HotelsController', HotelsController);

    function HotelsController(hotelDataFactory)
    {
    var vm=this;
    vm.title='Mean Hotel app';
    hotelDataFactory.hotelList().then(function(response){

    vm.hotels=response;

    });

    }

Answer 1

你必须在 return 之后放一些东西，因为它会 return undefined:

return {
        hotelList: hotelList,
        hotelDisplay : hotelDisplay
    };

而不是：

 return
    {
        hotelList: hotelList,
        hotelDisplay : hotelDisplay
    };

未知提供商错误 hoteldatafactory <- hoteldatafactory

unknown provider error hoteldatafactory <- hoteldatafactory

javascript

angularjs

mean-stack