0

Rails バックエンドで最初の AngularJS アプリを実行しようとしていますが、これまでのところ問題がありましたが、何とか前進できましたが、別の問題があります。

Angular タグが評価されていないようです。こんな感じです

ここに画像の説明を入力

以下は私のセットアップです

#app/assets/javascripts/recipes.js
this.recipe = angular.module('recipe',['ngRoute']);
this.recipe.config(['$routeProvider', function($routeProvider){
  return $routeProvider.otherwise({
     templateUrl: '../templates/home.html',
     controller: 'RecipeCtrl'
  });
}]);

テンプレートファイル

#public/templates/home.html
Value of "foo": {{foo}}

NGコントローラー

#app/assets/javascripts/angular/controllers/RecipeCtrl.js
this.recipe.controller('RecipeCtrl',['$scope', function($scope){
  $scope.foo = 'bar'
}]);

レイアウトファイル

#app/views/layouts/application.html.haml
!!!
%html{'ng-app' => 'recipe'}
  %head
    %title WILT
    = stylesheet_link_tag    "application", media: "all"
    = javascript_include_tag "application"
    = javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js'
    = javascript_include_tag '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js'
    = csrf_meta_tags
  %body
    %ng-view
      = yield

編集

HTML ページのソース

<!DOCTYPE html>
<html ng-app='recipe'>
  <head>
    <title>WILT</title>
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" />
    <link href="/assets/recipes.css?body=1" media="all" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <script src="/assets/jquery.js?body=1"></script>
    <script src="/assets/jquery_ujs.js?body=1"></script>
    <script src="/assets/angular.js?body=1"></script>
    <script src="/assets/angular-animate.js?body=1"></script>
    <script src="/assets/angular-resource.js?body=1"></script>
    <script src="/assets/angular/controllers/RecipeCtrl.js?body=1"></script>
    <script src="/assets/recipes.js?body=1"></script>
    <script src="/assets/application.js?body=1"></script>
    <meta content="authenticity_token" name="csrf-param" />
    <meta content="Mducbu35Xjovr50CaR4zX5yWNhZ/3Q8RKYaz1B8xGXg=" name="csrf-token" />
  </head>
  <body>
    <ng-view>

    </ng-view>
  </body>
</html>
4

0 に答える 0