如何使用rails处理angularjs中的路由

时间:2015-10-03 20:01:14

标签: ruby-on-rails angularjs

我正在学习使用rails的angularjs但是当我请求

时我卡住了
http://localhost:3000/#/users

它呈现默认的rails welocome页面

下面是我的app.js文件

var app = angular.module('myApp', ['ngRoute', 'ngResource']);

app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});


app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
 $routeProvider.when('/users',{
        templateUrl: 'home.html',
        controller: 'myCtrl'
        }
    );
 }]);

application.html.erb

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Books</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

   <div class="container" ng-view>
     <%= yield %>
   </div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

您需要创建新路线:

# config/routes.rb
root to: 'angular#index'

和一个带动作的控制器:

# app/controllers/angular_controller.rb
class AngularController < ApplicationController
  def index; end
end

以及包含ng-view的模板:

# views/angular/index.html.erb
<div class="container" ng-view>
</div>

我不建议将ng-view放在layouts/application中,最好将其放在页面模板文件中。

现在默认的Rails页面已经消失,你可以测试你的Angular应用程序。