如何启动angularjs - rails app

时间:2014-09-30 10:21:07

标签: javascript ruby-on-rails angularjs coffeescript

我正在尝试制作angularjs-rails应用程序。

这就是我所做的流程。

rails new myapp
rails g scaffold Post body:string title:string
rake db:migrate
好的,现在post的CRUD的后端准备好了。

现在是角度部分。

https://github.com/hiravgandhi/angularjs-rails

gem 'angularjs-rails'
bundle install

在javascripts / application.js

//= require angular
//= require angular-route

好的,设置已准备就绪。

现在,我必须添加角度代码。

/ app / views / layouts / application.html.erb

<!DOCTYPE html>
<html ng-app="cannaBlog">
<head>
  <title>UseAngular</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 ng-view>
</div>
</body>
</html>
/ app / assets / javascripts / angular / app.js.coffee

angular.module('cannaBlog', ['ngRoute'])
  .config(['$routeProvider'
    ($routeProvider) ->
      $routeProvider
      .when '/posts',
        template: '/app/assets/javascripts/angular/templates/posts/index.html',
        controller: 'postsCtrl'
      .otherwise
        redirectTo: '/posts'
      return
  ])
app / assets / javascript / angular / controllers / posts_controller.js.coffee

angular.module('cannaBlog', [])

.controller 'postsCtrl', ($scope)->
  $scope.yourName = "first" 
app / assets / javascripts / angular / templates / posts / index.html

this is index page

完成!

现在如果我输入网址

localhost:3000/posts

它只会转到rails routes并显示json数据

[{"id":1,"title":"123","body":"123","created_at":"2014-09-24T09:25:12.173Z","updated_at":"2014-09-24T09:25:12.173Z"}]

我在这里缺少什么?

===== 更新

我google了一下,并将此代码添加到rails部分application_controller.rb

  before_filter :render_single_page

  def render_single_page
    render 'layouts/application' if request.format == Mime::HTML
  end

现在,它会引导所有角度文件,但在

时仍然不显示任何内容

输入/posts,我认为角度路线部分存在问题:(

但没有显示错误

1 个答案:

答案 0 :(得分:0)

在app.js文件中尝试传递postsCtrl作为依赖项。这将使用控制器呈现您的模板。这应该显示一些错误。

angular.module('cannaBlog', ['ngRoute', 'postsCtrl'])
  .config(['$routeProvider'
    ($routeProvider) ->
      $routeProvider
      .when '/posts',
        template: '/app/assets/javascripts/angular/templates/posts/index.html',
        controller: 'postsCtrl'
      .otherwise
        redirectTo: '/posts'
      return
  ])