Angular.js 解析引发未知提供程序错误答案

【问题标题】：Angular.js resolve throws Unknown provider errorAngular.js 解析引发未知提供程序错误
【发布时间】：2014-07-08 21:57:47
【问题描述】：

我已经查看了有关此主题的许多相关问题和答案，但似乎没有一个适合我的情况，因为我无法在没有错误的情况下解决工作。

我正在尝试按照教程在此处通过解析了解 Angular 路由，并在我现有的应用程序中尝试此示例：http://www.undefinednull.com/2014/02/17/resolve-in-angularjs-routes-explained-as-story/。

我收到此错误，似乎它可能与我正在使用的解析和 ng-view 有关？任何帮助将不胜感激。对 Angular 来说还是比较新的。在后端使用 Rails：

错误：[$injector:unpr] 未知提供者：myFriendsHotelProvider http://errors.angularjs.org/1.2.6/$injector/unpr?p0=myFriendsHotelProvider%20%3C-%20myFriendsHotel 在http://lala.dev/assets/angular.js?body=1:79:12 在http://lala.dev/assets/angular.js?body=1:3539:19 在 Object.getService [as get] (http://lala.dev/assets/angular.js?body=1:3666:39) 在http://lala.dev/assets/angular.js?body=1:3544:45 在 getService (http://lala.dev/assets/angular.js?body=1:3666:39) 调用时 (http://lala.dev/assets/angular.js?body=1:3688:13) 在 Object.instantiate (http://lala.dev/assets/angular.js?body=1:3709:23) 在http://lala.dev/assets/angular.js?body=1:6759:28 在链接 (http://lala.dev/assets/angular-route.js?body=1:907:26) 在 nodeLinkFn (http://lala.dev/assets/angular.js?body=1:6213:13)

app.js.coffee

window.lala = angular.module "Lala", ["angularFileUpload", "ngResource", "ngAnimate", "ngRoute", "ui.bootstrap", "ui.bootstrap.setNgAnimate", "ui.sortable", 'ngTagsInput']

lala.config ['$httpProvider', ($httpProvider) ->
  authToken = $("meta[name=\"csrf-token\"]").attr("content")
  $httpProvider.defaults.headers.common["X-CSRF-TOKEN"] = authToken
]

lala.config ['$routeProvider', ($routeProvider) ->
  $routeProvider
    .when("/accomodation",
      templateUrl: "/assets/templates/list.html"
      controller: "AccomodationCtrl"
      resolve: ->
        myFriendsHotel: ->
          hotelName: ->
            "My Friend's Hotel"
          roomNumber: ->
            "100"
    )
    .when("/home",
      templateUrl: "/assets/templates/home.html"
      controller: "HomePageCtrl"
    )
    .when("/tags/:tag",
      templateUrl: "/assets/templates/lists.html"
      controller: "ListsCtrl"
    )
    .when("/:filter",
      templateUrl: "/assets/templates/lists.html"
      controller: "ListsCtrl"
    )
    .when("/users/:id",
      templateUrl: "/assets/templates/profile.html"
      controller: "UsersCtrl"
    )

    .otherwise(redirectTo: '/recent')
]

accomodation_controller.js.coffee

lala.controller "AccomodationCtrl", ["$scope", "myFriendsHotel", ($scope, myFriendsHotel) ->
  $scope.name = "Shidhin"
  $scope.place = "Switzerland"
  $scope.hotel = myFriendsHotel.hotelName()
  $scope.roomno = myFriendsHotel.roomNumber()
]

list.html.haml

.row
  .col-xs-12.col-sm-6.col-md-8
    %div
      %h2 Hi, {{name}}. Welcome to {{place}}
      %div The accomodation is arranged on <strong>{{hotel}}</strong> and room number is <strong>{{roomno}}</strong>
  .col-xs-6.col-md-4
    #right-column
      great work

angular.html.haml

!!!
%html
  %head
    %title Lala
    %meta{content: "width=device-width, initial-scale=1.0", name: "viewport"}/
    = favicon_link_tag "lala_favicon.ico"
    = stylesheet_link_tag "http://fonts.googleapis.com/css?family=Lato"
    = stylesheet_link_tag "application", :media => "all"
    = javascript_include_tag "application"
    = csrf_meta_tags

    :javascript
      window.current_user_name = "#{current_user.try(:username)}" 
      window.current_user_image = "#{avatar_url(current_user) unless !current_user}"


  %body{"ng-app" => "Lala"}
    = render :partial => "shared/navbar"
    #page-content{iScroll: ""}
      .container.bordered
        .row
          .col-xs-12.col-sm-12.col-md-12.col-lg-12
            .breadcrumb
              {{breadcrumb}}
        %div{"ng-view" => true}
          = yield
    #scroll-top
      %a{:href => "#"}
        back to top
        %span.glyphicon.glyphicon-arrow-up

【问题讨论】：

就像 dnc253 写的那样，您缺少 myFriendsHotelProvider 服务定义。所以在你的代码中的某个地方你应该有 lala.factory "myFriendsHotel", -> 行。在已发布的 sc 中找不到它。
确保您没有在任何地方声明 ng-controller='AccomodationCtrl'
@bekite，他不是，这是从解析中注入的，所以它应该可以工作。
@Chandermani 是的，你是对的。没有正确检查代码。过于关注错误消息。
@aressidi 也许这是导致错误的原因：解决：-> 没有功能。解决后删除->

标签： ruby-on-rails angularjs

【解决方案1】：

任何时候你得到Unknown provider 错误，这是因为Angular 不知道如何提供你所要求的依赖。该错误告诉您是哪个依赖项：

Unknown provider: myFriendsHotelProvider <- myFriendsHotel

那么，那么问题来了，为什么 Angular 不能注入 myFriendsHotel？检查它的定义位置，并确保它包含的任何模块都包含在您的应用中。

【讨论】：