Ruby on rails 如何在点击angularjs设计的前端按钮后将数据添加到rails中的后端？_Ruby On Rails_Angularjs

Ruby on rails 如何在点击angularjs设计的前端按钮后将数据添加到rails中的后端？

ruby-on-rails angularjs

Ruby on rails 如何在点击angularjs设计的前端按钮后将数据添加到rails中的后端？,ruby-on-rails,angularjs,Ruby On Rails,Angularjs,我是Angular和rails api的新手。我有一个名为contacts的Angular应用程序，我使用Yeoman在Angular.js中构建了它。我在后端构建了一个rails api。我能够通过在轨道和角度前端之间建立链接来检索数据。我的问题是如何在单击按钮后将数据添加到rails中的后端？请检查图片以获得清晰的图片这是我的app.js代码： 'use strict'; /** * @ngdoc overview * @name fakeLunchHubApp * @descri

我是Angular和rails api的新手。我有一个名为contacts的Angular应用程序，我使用Yeoman在Angular.js中构建了它。我在后端构建了一个rails api。我能够通过在轨道和角度前端之间建立链接来检索数据。我的问题是如何在单击按钮后将数据添加到rails中的后端？请检查图片以获得清晰的图片

这是我的app.js代码：

'use strict';

/**
 * @ngdoc overview
 * @name fakeLunchHubApp
 * @description
 * # fakeLunchHubApp
 *
 * Main module of the application.
 */
var app = angular.module('fakeLunchHubApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ]);

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrl'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrl'
    })
    .when('/groups', {
      templateUrl: 'views/groups.html',
      controller: 'GroupsCtrl'
    })
    .when('/contact', {
      templateUrl: 'views/contact.html',
      controller: 'GroupsCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
});


app.factory('Group', ['$resource', function($resource) {
  return $resource('/api/groups/:id.json', null, {
    'update': { method:'PUT' }
  });
}]);

还有mygroups.js

'use strict';

/**
 * @ngdoc function
 * @name fakeLunchHubApp.controller:GroupsCtrl
 * @description
 * # GroupsCtrl
 * Controller of the fakeLunchHubApp
 */
angular.module('fakeLunchHubApp')
  .controller('GroupsCtrl', ['$scope', 'Group', function ($scope, Group) {
    $scope.groups = Group.query();
  }]);

Index.html

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>Angular Rails</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="fakeLunchHubApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container">
      <div class="header" ng-controller="HeaderController">
        <ul class="nav nav-pills pull-right" >
          <li ng-class="{ active: isActive('/')}"><a ng-href="#">Home</a></li>
          <li ng-class="{ active: isActive('/groups')}"><a ng-href="#/groups">Groups</a></li>
          <li ng-class="{ active: isActive('/about')}"><a ng-href="#/about">About</a></li>
          <li ng-class="{ active: isActive('/contact')}"><a ng-href="#/contact">Contact</a></li>

        </ul>
        <h3 class="text-muted">Angular Rails</h3>
      </div>

      <div ng-view=""></div>

      <div class="footer">
        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
      </div>
    </div>


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
    <script>
        function HeaderController($scope, $location) 
       { 
        $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}
    </script>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');

    </script>

    <!-- build:js(.) scripts/oldieshim.js -->
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <![endif]-->
    <!-- endbuild -->

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="scripts/controllers/groups.js"></script>
        <!-- endbuild -->
</body>
</html>

我的路线.rb

Rails.application.routes.draw do
  scope '/api' do
    resources :groups, except: [:new, :edit]
  end
end

客户端代码上载到此处：

服务器代码上传到这里：

我将下面的代码添加到我的group.js中，效果很好

 $scope.addgrp = function(title) {
      var grp = new Group();
      grp.name = title;
      grp.$save(function(){
        $scope.contact=null;
        $scope.groups = Group.query();  
      });
   };

Rails.application.routes.draw do
  scope '/api' do
    resources :groups, except: [:new, :edit]
  end
end

 $scope.addgrp = function(title) {
      var grp = new Group();
      grp.name = title;
      grp.$save(function(){
        $scope.contact=null;
        $scope.groups = Group.query();  
      });
   };