RoR - 角度錯誤：未知的提供者：mWebSrvcProvider < - mWebSrvc

我的Angular代碼在它自己的工作上很好，但是一旦我將它放入RoR項目中，然後我收到您在標題中列出的錯誤 -RoR - 角度錯誤：未知的提供者：mWebSrvcProvider < - mWebSrvc

//all the common/models are added to this.. so we can re-use across apps 
var mainApp = angular.module('mainApp', ['ngResource', 'ngSanitize', 'ngCookies', 'ui.bootstrap']); 

//app for all flows 
var mWebApp = angular.module('mWebApp', ['mainApp', 'mWebApp.mWebSrvc', 'mWebApp.mWebCtrl']) 
    .config(['$routeProvider', function($routeProvider) { 
     $routeProvider 
     .when('/', { 
      templateUrl: 'angular/views/index.html', 
      controller: 'mWebCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
}]); 

var mGlobolJson = []; 

var mWebCtrl = function($rootScope, $scope, $timeout, $location, mWebSrvc) { 
    $scope.nav_tpl = 'angular/views/nav.html'; 
    $scope.footer_tpl = 'angular/views/footer.html'; 
    $scope.Index = null; 

$scope.loc = ""; 
$scope.loc = $location.path(); 

$scope.go = function(hash){ 
    $scope.loc = $location.path(); 
    $location.path(hash); 
} 

mWebSrvc.getCustomers(function(data){ 
    $scope.items = data; 
    mGlobolJson = data; 
}); 

$scope.doNothing = function(){} 

$scope.myEnlargeImage = function(someParamComing){ 
    var newWin = window.open("", name="_blank", "width=1270,height=952,toolbar=0,status=1,menubar=0,top=0,left=0,location=0,outerWidth=1270,outerHeight=952"); 
    var htmlVar = ""; 
    htmlVar += "<html><body bgcolor='#666'><img id='myLargerImage' style='position: absolute; top: -5px; left: -5px;' src="+someParamComing+" /></body></html>"; 
    newWin.document.write(htmlVar); 
} 
} 

mainApp.controller('mWebCtrl', mWebCtrl); 

var mWebSrvc = function($http, $log) { 

this.getCustomers = function() { 
    $http({ 
     method : 'POST', 
     url : 'http://localhost:3000/api/customers/' 
    }).success(function(data, status, headers, config) { 
     $log.log('Done'); 
     angular.forEach(data, function(c) { 
      $log.log(c.Title); 
     }); 
     customers = data; 
     return customers; 
    });  
}; 

this.insertCustomer = function(Title, h1, Comments, Comments2, download_coupon) { 
    var topID = customers.length + 1; 
    customers.push({ 
     id : topID, 
     Title : Title, 
     h1 : h1, 
     Comments : Comments, 
     Comments2 : Comments2, 
     download_coupon : download_coupon 
    }); 
}; 

this.getCustomer = function(id) { 

}; 

this.deleteCustomer = function(id) { 

}; 

}  
mainApp.service('mWebSrvc', mWebSrvc);

對RoR的項目文件結構如下：

我甚至試過命名scripts目錄「腳本」，以確保它加載後mWeb.js，以及控制器以確保mWebCtrl.js在mWebSrvc.js之後加載，但無濟於事。

我已經使用無數的Angular項目的目錄結構，它可以GET或POST到JSON文件，沒有問題。

爲什麼這個相同的代碼在獨立的Angular而不是RoR中工作？

來源

2014-03-27 kronus

我相信我知道爲什麼，我不能相信這之前，我不明白，我，但我不得不在coffeescript中重寫所有這一切 – kronus

事實上，一旦我轉換我所有的角到CoffeeScript的，那麼它完全與回報率工作

@mWebApp.config(['$routeProvider', ($routeProvider) -> 
    $routeProvider 
     .when('/customers', { 
     templateUrl: '../templates/customers/index.html', 
     controller: 'mWebCtrl' 
     }) 
    .when('/customers/:Title', { 
     templateUrl: '../templates/customers/show.html', 
     controller: 'mWebShowCtrl' 
     }) 
     .otherwise({ 
     templateUrl: '../templates/home.html', 
     controller: 'mWebCtrl' 
     }); 
]); 

@mWebApp.controller 'mWebCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) -> 
    $scope.customers = [] 
    $http.get('./api/customers').success((data) -> 
    $scope.customers = data 
) 
    $scope.viewCustomer = ((Title) -> 
    $location.url "/customers/#{Title}" 
) 
] 

@mWebApp.controller 'mWebShowCtrl', ['$scope', '$http', '$routeParams', ($scope, $http, $routeParams) -> 
    $http.get("./api/customers/#{$routeParams.Title}").success((data) -> 
    $scope.customer = data 
) 
] 

@mWebApp.directive 'customerTitle', [ -> 
    restrict: 'E', 
    template: '<h1>{{ customer.0.Title }}</h1>' 
] 

@mWebApp.directive 'customerH1', [ -> 
    restrict: 'E', 
    template: '<h2>{{ customer.0.h1 }}</h2>' 
] 

@mWebApp.directive 'customerComments', [ -> 
    restrict: 'E', 
    template: '<li><p>{{ customer.0.Comments }}</p></li>' 
] 

@mWebApp.directive 'customerComments2', [ -> 
    restrict: 'E', 
    template: '<li><p>{{ customer.0.Comments2 }}</p></li>' 
] 

@mWebApp.directive 'customerDownloadGallery', [ -> 
    restrict: 'E', 
    template: '<li>{{ customer.0.download_gallery }}</li>' 
] 

@mWebApp.directive 'customerCreatedAt', [ -> 
    restrict: 'E', 
    template: '<li><p>{{ customer.0.created_at }}</p></li>' 
] 

@mWebApp.directive 'customerUpdatedAt', [ -> 
    restrict: 'E', 
    template: '<li><p>{{ customer.0.updated_at }}</p></li>' 
] 

@mWebApp.service 'mWebSrvc', ['$scope', ($scope) -> 

]

來源

2014-03-30 21:51:16 kronus

我認爲這個問題是由縮小造成的。 Rails將這些文件縮小並且依賴注入會停止工作，因爲縮寫會使用較短的名稱替換參數名稱（如a，b，c等）。要縮小Angular的工作範圍，您需要以特定的方式編寫代碼。例如：

app.controller('myCOntroller', function($scope) { 
});

應該這樣寫：

app.controller('myCOntroller', ['$scope', function($scope) { 
}]);

這使得角度做正確的依賴注入。在你的情況，你有：

var mWebCtrl = function($rootScope, $scope, $timeout, $location, mWebSrvc) { 
.... 
};

而且你的控制器定義應該如下：

mainApp.controller('mWebCtrl', ['$rootScope', '$scope', '$timeout', '$location', 'mWebSrvc', mWebCtrl]);

也有這樣做的另一種方法：

mWebCtrl.$inject = ['$rootScope', '$scope', '$timeout', '$location', 'mWebSrvc'] 
mainApp.controller('mWebCtrl', mWebCtrl);

而且，服務：

mainApp.service('mWebSrvc', ['$http', '$log', mWebSrvc]);

您可以閱讀更多關於此問題here。

來源

2014-03-29 12:10:27

感謝您的信息，但轉換爲coffeescript允許一切與RoR – kronus

RoR - 角度錯誤：未知的提供者：mWebSrvcProvider < - mWebSrvc

回答

相關問題