2012-05-18 24 views
8

Gần đây tôi đã tạo ứng dụng AngularJS 1.0.0rc8 với Rails 3.2.3 back-end và nó hoạt động tốt trong quá trình phát triển, nhưng sau khi triển khai đến Heroku có lỗi Unknown Provider - dường như ứng dụng không thể nhìn thấy đối tượng dịch vụ.AngularJS + Rails - Vấn đề khi nén tài sản

Tôi biết rằng nó bây giờ cần thiết để bao gồm góc-resource.js như một tập tin riêng biệt và tiêm ngResource vào các module ứng dụng như thế này:

// main app javascript file 

'use strict'; 

angular.module('contactapp', ['ngResource']). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/contacts', {template: 'assets/app/partials/contact-list.html', controller: ContactListCtrl}). 
     when('/contacts/new', {template: 'assets/app/partials/new-contact.html', controller: ContactListCtrl}). 
     when('/contacts/:contact_id', {template: 'assets/app/partials/contact-detail.html', controller: ContactDetailCtrl}). 
     otherwise({redirectTo: '/contacts'});  

}]); 

Tôi cũng biết rằng khi tập tin được minified rằng bộ điều khiển không thể nói những gì phụ thuộc của họ trừ khi họ cũng được tiêm vào các đối tượng điều khiển như thế này:

ContactListCtrl.$inject = ['$scope', '$http', 'Contacts']; 

tôi cũng đã cố gắng làm điều đó một cách khác mà kiễu góc khuyến cáo với khung notat ion và đi qua trong một chức năng như thế này:

var ContactListCtrl= ['$scope', '$http', 'Contacts', function($scope, $http, Contacts) { /* constructor body */ }]; 

Tuy nhiên, không ai trong số này dường như làm việc.

Cách duy nhất ứng dụng của tôi có thể nhìn thấy nguồn cung cấp là bằng cách tắt nén tài sản trong file Production.rb, như thế này:

# Compress JavaScripts and CSS 
    config.assets.compress = false 

Phải mất vài giờ cho tôi để con số này ra, nhưng tôi gần đây đã thấy một ứng dụng Rails + AngularJS khác có cùng vấn đề.

Jens Krause đến cùng một kết luận và giải thích nó trên blog của mình: http://www.websector.de/blog/2012/01/17/fun-with-angularjs-rails-coffeescript-sass-another-cafe-townsend-example/

Nếu tôi có một ứng dụng tương đối lớn, và tôi cần để nén các tài sản, làm thế nào để làm được việc này bằng góc với Rails ?

Cảm ơn.

Trả lời

3

Tôi nghĩ rằng vấn đề là minifier của bạn vẫn obfusticicating tên biến của kiểm soát chính nó (ContactListCtrl -> a hoặc bất cứ điều gì nó làm).

Bạn đã thử xác định bộ điều khiển của mình bằng chức năng module.controller chưa?

angular.module('myModule', []) 
.controller('Controller1', ['dep1', 'dep2', function(dep1, dep2) { 
    //code 
}]); 
+1

Tôi cũng đã thử phương pháp này không thành công, tôi gặp lỗi tương tự. Xem tại đây: http://stackoverflow.com/questions/13459452/rails-3-angularjs-minification-does-not-work-in-production-unknown-provider – jemminger

2

Thêm dòng này để cấu hình của tôi/môi trường/production.rb đã làm các trick cho tôi:

config.assets.js_compressor = Sprockets::LazyCompressor.new { Uglifier.new(:mangle => false) } 
7

Nếu bạn đang sử dụng Rails 4, thay đổi js_compressor của bạn trong môi trường sản xuất và dàn dựng của bạn để :

config.assets.js_compressor = Uglifier.new(mangle: false) 
+1

Điều này không hiệu quả. – scaryguy

+1

Giúp tôi (ứng dụng Angular + Rails trên Heroku). –

Các vấn đề liên quan