使用 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

ruby-on-rails

angularjs

angular-material