未捕獲的ReferenceError：require沒有使用AngularJS，Rails 4和Browserify定義

我使用的是AngularJS和Rails，並遵循http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/和其他幾個教程來獲得一個非常簡單的「Hello World」示例並在我的桌面上運行。問題是，當我將它部署到服務器時，我的基於Angular的代碼不再工作了。相反，我的控制檯中出現Uncaught ReferenceError: require is not defined錯誤。未捕獲的ReferenceError：require沒有使用AngularJS，Rails 4和Browserify定義

我意識到我的部分問題是瀏覽器不知道如何處理'require'函數調用，這是有道理的，所以我使用browserify-rails安裝了Browserify。但是，它仍然不能像我所期望的那樣在服務器上工作，並且我得到相同的錯誤。

Link to the live site: Link

這裏是我的application.html.erb（簡體）：

<!DOCTYPE html> 
<html> 
<head> 
    <base href="/" /> 
    <title>ShibaInu</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => false %> 
    <%= csrf_meta_tags %> 
</head> 
<body ng-app="shibaInu"> 
    <div class="container">1 + 2 = {{ 1 + 2 }}</div> 

    <div class="container"> 
    <%= yield %> 
    </div> 

</body> 
</html>

index.html.erb：

<div ng-view=""></div>

home.html.erb（渲染的容器內）：

<h1>The Home View!</h1> 
<ul> 
    <li ng-repeat="thing in things"> 
    {{thing}} 
    </li> 
</ul>

home.js：

angular.module('shibaInu') 
    .controller('HomeCtrl', function ($scope) { 
     $scope.things = ['Angular', 'Rails 4.1', 'Working', 'Together!!']; 
    });

app.js：

angular 
    .module('shibaInu', [ 
     'ngRoute', 
     'templates' 
    ]).config(function ($routeProvider, $locationProvider) { 
     $routeProvider 
      .when('/', { 
       templateUrl: 'home.html', 
       controller: 'HomeCtrl' 
      }); 
     $locationProvider.html5Mode(true); 
    });

application.js

//= require jquery 
//= require jquery_ujs 
//= require angular 
//= require angular-route 
//= require angular-resource 
//= require angular-rails-templates 
//= require bootstrap-sprockets 
//= require ng-app/app.js 
//= require_tree ../templates 
//= require_tree .

來源

2015-10-05 Jimmy M

您可以發佈您'application.js'清單文件？ – Zoran

@Zoran感謝您的快速響應！我已將它添加到帖子中。 –

我正在做幾件事情錯了，但我會試着總結一下：

我在我的s上縮小JS像一個好孩子一樣的部署，但我並沒有寫出安全可靠的JS。請參閱下面的我的固定JS。
這並沒有在我的原始文章中指定，但我沒有像我以爲的那樣使用angularjs-rails寶石。我將它添加到我的項目中。
與上述2相關，在我的初始文章中，我曾使用bower安裝angularjs，如文檔建議。對於我的解決方案，我拿出了這個，因爲它只是爲了我的目的而使事情變得混亂。

新home.js：

angular.module('shibaInu') 
    .controller('HomeCtrl', ['$scope', function ($scope) { 
     $scope.things = ['Angular', 'Rails 4.1', 'Working', 'Together!!']; 
    }]);

新app.js：

angular 
    .module('shibaInu', [ 
     'ngRoute', 
     'templates' 
    ]).config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 
     $routeProvider 
      .when('/', { 
       templateUrl: 'home.html', 
       controller: 'HomeCtrl' 
      }); 
     $locationProvider.html5Mode(true); 
    }]);

來源

2015-10-06 01:10:48

未捕獲的ReferenceError：require沒有使用AngularJS，Rails 4和Browserify定義

回答

相關問題