0

私は AngularJS と Rails を使用しており、http: //start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/ と他のいくつかのチュートリアルに従って、非常に単純な「Hello World」を取得しています。私のデスクトップで実行中の例。問題は、それをサーバーにデプロイすると、Angular に基づくコードが機能しなくなることです。代わりにUncaught ReferenceError: require is not defined、コンソールにエラーが表示されます。

私の問題の一部は、ブラウザーが 'require' 関数呼び出しをどう処理するかを認識していないことにあることに気付きました。ただし、期待どおりにサーバー上で動作せず、同じエラーが発生します。

ライブ サイトへのリンク:リンク

これが私の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 .
4

1 に答える 1

0

私はいくつか間違ったことをしていましたが、要約しようとします：

  1. 私は良い子のようにサーバー展開で JS を縮小していますが、縮小に安全な JS を書いていませんでした。私の固定JSについては以下を参照してください。
  2. これは私の最初の投稿では明記されていませんでしたが、私は自分がangularjs-rails思っていたように宝石を使用していませんでした. これを私のプロジェクトに追加しました。
  3. 上記の 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-06T01:10:48.723 に答える