带有 angular-fullstack 的简单 http.post（使用 ui-router）答案

【问题标题】：Simple http.post with angular-fullstack (using ui-router)带有 angular-fullstack 的简单 http.post（使用 ui-router）
【发布时间】：2016-06-03 15:56:44
【问题描述】：

上下文：我刚开始使用 AngularJS，从一个干净的 generator-angular-fullstack 构建开始。作为安装的一部分，我使用了 UI 路由器。我已经设置了服务器 API 端点并在浏览器中对其进行了测试。他们都退房。

我正在尝试执行最小的 http.post 请求来调用这些 API 端点。通过 Yeoman，我在 client/app/signIn 中预先生成了一个新路由“signIn”（包括 signIn.html、signIn.js、signIn.controller.js、signIn.controller.spec.js、signIn.scss）。

这是我的工作内容：

signIn.html

<script>
var MainCtrl = function($scope, $http) {
  $http.post('/api/auth/signin', {auth_token: '5'}).success(function(response) {
    $scope.response = response;
  });
};
</script>
<body ng-controller="MainCtrl">
<section ui-view>Response: {{response}}</section>
</body>

为了完整性（仍然保持不变：）

signIn.js

'use strict';

angular.module('orbitApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('signIn', {
        url: '/signIn',
        template: '<sign-in></sign-in>'
      });
  });

signIn.controller.js

'use strict';
(function(){

class SignInComponent {
  constructor() {
    this.message = 'Hello';

  }
}

angular.module('orbitApp')
  .component('signIn', {
    templateUrl: 'app/signIn/signIn.html',
    controller: SignInComponent
  });

})();

我已经尝试了许多关于 signIn.html 脚本的变体，但到目前为止都没有运气。我想找到“本机”的方式来做到这一点，所以我宁愿不使用 jquery。任何建议将不胜感激！

【问题讨论】：

标签： angularjs angular-ui-router angular-http angular-fullstack

【解决方案1】：

我不完全理解你想要做什么，但我希望这段代码能帮助你：

signIn.html

<body>
<section ui-view>Response: {{response}}</section>
<a class="btn btn-info" href="#" ng-click="callingPostFct()" role="button">Trigger http post using button as example</a>
</body>

signIn.js

'use strict';

angular.module('orbitApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('signIn', {
        url: '/signIn',
        template: '<sign-in></sign-in>'
      });
  });

signIn.controller.js

'use strict';
(function(){

  class SignInComponent {
    constructor($scope, $http) {
      $scope.callingPostFct = function() {
        $http.post('/api/auth/signin', {
          //do anything you want with your api endpoint here :
          auth_token: '5'
        }).success(function(response) {
          console.log('post successfully worked !');
          $scope.response = response;
        });
      };

    }
  }

  angular.module('orbitApp')
    .component('signIn', {
      templateUrl: 'app/signIn/signIn.html',
      controller: SignInComponent
    });

})();

注意： 不要将ng-controller="" 放在您的 html 文件中，因为它们已经被生成器调用，并且它们会被调用两次甚至更多次，这可能会给您的应用带来一些问题并降低性能。

在大多数情况下，当您尝试使用<script> 标签时，您可以在控制器中执行此操作。

【讨论】：

一个简洁问题的简洁解决方案，正是我所需要的！谢谢埃米多姆！