Question

我的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);

RoR项目的文件结构如下：

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

我甚至试图命名脚本目录＆＃34;脚本＆＃34;确保它在mWeb.js之后加载，以及控制器以确保mWebCtrl.js在mWebSrvc.js之后加载，但无济于事。

我已经使用了无数Angular项目的目录结构，它可以无问题地GET或POST到JSON文件。

为什么这个相同的代码在独立的Angular而不是在RoR中工作？

Answer 1

我认为这个问题是由缩小造成的。 Rails缩小了这些文件并且依赖注入停止工作，因为minification用更短的名称（如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。

Answer 2

实际上，一旦我将所有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) ->

]

RoR - 角度错误：未知提供者：mWebSrvcProvider＆lt; - mWebSrvc

2 个答案: