使用 rails 配置 angular material

Question

我正在尝试在 Rails 中构建我的第一个 api。为此，我想对前端使用 angular，对后端使用 ruby。我设法让 angular 工作，但由于某种原因我无法让 angular-material 工作。我尝试使用 this gem 并按照那里写的说明进行操作。
我面临的问题是，坦率地说它不起作用，我也没有从 Web 控制台收到有意义的错误。
可以找到我正在尝试制作的项目 here 。我知道它需要大量的代码重构等等，我现在只是在尝试配置。
在网页上，这是唯一显示的内容：

Primary (md-noink)
Disabled

来自这个命令：

<section layout="row" layout-sm="column" layout-align="center center">
      <md-button>{{title1}}</md-button>
      <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
      <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
      <md-button class="md-warn">{{title4}}</md-button>
      <div class="label">Flat</div>
    </section>

这让我相信它不起作用...
这也是一个必须是绿色但不是绿色的导航栏：

<div class="navbar navbar-default">
 <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="javascript:void(0)">Brand</a>
 </div>
 <div class="navbar-collapse collapse navbar-responsive-collapse">
   <ul class="nav navbar-nav">
     <li class="active"><a href="javascript:void(0)">Active</a></li>
     <li><a href="javascript:void(0)">Link</a></li>
     <li class="dropdown">
       <a href="http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
       <ul class="dropdown-menu">
         <li><a href="javascript:void(0)">Action</a></li>
         <li><a href="javascript:void(0)">Another action</a></li>
         <li><a href="javascript:void(0)">Something else here</a></li>
         <li class="divider"></li>
         <li class="dropdown-header">Dropdown header</li>
         <li><a href="javascript:void(0)">Separated link</a></li>
         <li><a href="javascript:void(0)">One more separated link</a></li>
       </ul>
     </li>
   </ul>
   <form class="navbar-form navbar-left">
     <input type="text" class="form-control col-lg-8" placeholder="Search">
   </form>
   <ul class="nav navbar-nav navbar-right">
     <li><a href="javascript:void(0)">Link</a></li>
     <li class="dropdown">
       <a href="http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
       <ul class="dropdown-menu">
         <li><a href="javascript:void(0)">Action</a></li>
         <li><a href="javascript:void(0)">Another action</a></li>
         <li><a href="javascript:void(0)">Something else here</a></li>
         <li class="divider"></li>
         <li><a href="javascript:void(0)">Separated link</a></li>
       </ul>
     </li>
   </ul>
 </div>
</div>

Answer 1

当您使用 rails-api 创建后端时，不会创建视图，因此您不必担心 angular gem从中挑选。您可以为客户端（您的 angular 前端）和 generate the frontend 创建另一个目录（和存储库）。现在您只需担心获取数据，无论是 JSON 还是 XML，在 API 和您的客户之间传输。

您可以找到分步教程 here。

希望一切顺利！

使用 rails 配置 angular material

Configuring angular material with rails

javascript

ruby-on-rails

ruby

angularjs

angular-material