Ruby on rails RoR-角度错误：未知提供程序：mWebSrvcProvider<；-mWebSrvc_Ruby On Rails_Angularjs

Ruby on rails RoR-角度错误：未知提供程序：mWebSrvcProvider<；-mWebSrvc

ruby-on-rails angularjs

Ruby on rails RoR-角度错误：未知提供程序：mWebSrvcProvider<；-mWebSrvc,ruby-on-rails,angularjs,Ruby On Rails,Angularjs,我的Angular代码本身运行良好，但一旦我将其放入RoR项目中，就会收到标题中列出的错误- //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 mWe

我的Angular代码本身运行良好，但一旦我将其放入RoR项目中，就会收到标题中列出的错误-

//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);

我甚至尝试将脚本目录命名为“scripts”，以确保它在mWeb.js之后加载，并尝试将控制器命名为mWebCtrl.js在mWebSrvc.js之后加载，但没有成功

我已经为无数Angular项目使用了目录结构，它能够毫无问题地获取或发布到JSON文件

为什么同样的代码会在独立的角度而不是RoR中工作？

我相信这个问题是由缩小引起的。Rails缩小了这些文件，依赖项注入停止工作，因为缩小将用较短的名称（如a、b、c等）替换函数中的参数名称。要使角度在缩小时工作，您需要以特定的方式编写代码。例如：

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

应该这样写：

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

这使angular能够正确地执行依赖项注入。就您而言，您有：

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

控制器的定义应如下所示：

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

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]);

你可以阅读更多关于这个问题的信息。

事实上，一旦我将所有的Angular脚本转换为coffeescript，它就可以完美地与RoR配合使用了

    @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) ->

]

@mWebApp.config（['$routeProvider'，（$routeProvider）->
$routeProvider
。当（“/客户”{
templateUrl:“../templates/customers/index.html”，
控制器：“mWebCtrl”
})
.when（“/customers/：Title”{
templateUrl:“../templates/customers/show.html”，
控制器：“mWebShowCtrl”
})
.否则({
templateUrl:“../templates/home.html”，
控制器：“mWebCtrl”
});
]);
@mWebApp.controller“mWebCtrl”[“$scope”、“$location”、“$http”、（$scope、$location、$http）->
$scope.customers=[]
$http.get（'./api/customers'）.success（（数据）->
$scope.customers=数据
)
$scope.viewCustomer=（标题）->
$location.url“/customers/#{Title}”
)
]
@mWebApp.controller“mWebShowCtrl”[“$scope”、“$http”、“$routeParams”、（$scope、$http、$routeParams）->
$http.get（“./api/customers/#{$routeParams.Title}”）.success（（数据）->
$scope.customer=数据
)
]
@mWebApp.directive“customerTitle”，[->
限制：'E'，
模板：“{customer.0.Title}}”
]
@mWebApp.directive“customerH1”，[->
限制：'E'，
模板：“{customer.0.h1}}”
]
@mWebApp.directive“customerComments”，[->
限制：'E'，
模板：'{{customer.0.Comments}}'
]
@mWebApp.directive“customerComments2”，[->
限制：'E'，
模板：'{{customer.0.Comments2}}'
]
@mWebApp.directive“customerDownloadGallery”，[->
限制：'E'，
模板：“{{customer.0.download_gallery}”
]
@mWebApp.directive“customerCreatedAt”，[->
限制：'E'，
模板：“{{customer.0.created_at}}”
]
@mWebApp.directive“customerUpdatedAt”，[->
限制：'E'，
模板：“{{customer.0.updated_at}}”
]
@mWebApp.service“mWebSrvc”[“$scope”，（$scope）->
]

我相信我知道为什么，我不敢相信我以前没有意识到这一点，但我必须在coffeescript中重写所有这些。谢谢你提供的信息，但转换为coffeescript可以让RoR的一切都正常工作