RoR - 각도 오류 : 알 수없는 공급자 : mWebSrvcProvider <- mWebSrvc

내 앵귤러 코드는 자체적으로 정상적으로 작동하지만 일단 RoR 프로젝트 내부에 배치하면 제목에 표시된 오류 메시지가 나타납니다 -RoR - 각도 오류 : 알 수없는 공급자 : mWebSrvcProvider <- mWebSrvc

app> assets> javascript> mAngular> mWeb.js 
app> assets> javascript> mAngular> scripts> services> mWebSrvc.js 
app> assets> javascript> mAngular> scripts> controllers> mWebCtrl.js

나는 심지어 후 mWeb.js뿐만 아니라 컨트롤러를로드하도록 보장하기 위해 스크립트 디렉토리 "스크립트"이름을 시도한 다음과 같이

//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 프로젝트의 파일 구조는 mWebCtrl.js가 mWebSrvc.js 뒤에로드되지만 아무 소용이 없도록 보장해야합니다.

저는 GET 또는 JSON 파일에 POST 할 수있는 수많은 프로젝트에 문제없이 디렉토리 구조를 사용했습니다.

왜이 동일한 코드가 RoR의 독립형 및 독립형에서 작동합니까?

출처

2014-03-27 kronus

의 RoR와 함께 완벽하게 작동 내 이 모든 것을 coffeescript로 다시 작성하십시오. – kronus

사실, 모든 커피 스크립트에 각도, 그것은 내가하고 내가 전에 날 새벽하지 않았다 믿을 수 없어 이유를 알고 생각,하지만 난에이

@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

이 문제는 축소로 인해 발생한다고 생각합니다. 레일스는 이러한 파일을 축소하고 종속성 주입이 작동을 멈추게합니다. 축소가 기능에서 인수 이름을 더 짧은 이름 (예 : a, b, c 등)으로 바꾸기 때문입니다. 축소 될 때 Angular 작업을 수행하려면 특정 방식으로 코드를 작성해야합니다. 예를 들어 :

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

는 다음과 같이 기록한다 :

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

이 제대로 의존성 주입을 할 각도 할 수 있습니다.

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

하고 있어야한다 컨트롤러 정의는 다음과 같습니다 : 귀하의 경우 , 당신은을 위해, 또한

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

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

또한이 작업을 수행하는 또 다른 방법이있다 서비스 :

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

이 문제에 대한 자세한 내용은 here입니다. 나는 변환하면

출처

2014-03-29 12:10:27

정보를 주셔서 감사 합니다만, coffeescript로 변환하면 모든 것이 RoR과 함께 작동 할 수 있습니다. – kronus

RoR - 각도 오류 : 알 수없는 공급자 : mWebSrvcProvider <- mWebSrvc

답변

관련 문제