简单 http.post 与 angular-fullstack（使用 ui-路由器）

Question

上下文：我刚开始使用 AngularJS，从一个干净的生成器-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 脚本上尝试了多种变体，到目前为止还没有成功。我想找到 'native' 的方法，所以我不想使用 jquery。如有任何建议，我们将不胜感激！

Answer 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> 标签时，您可以在控制器中进行。

简单 http.post 与 angular-fullstack（使用 ui-路由器）

Simple http.post with angular-fullstack (using ui-router)

angularjs

angular-http

angular-ui-router

angular-fullstack