Простой http.post с angular-fullstack (с использованием ui-router)

Контекст: я только начал работать с AngularJS, начав с чистой сборки с генератором-угловым-полным стеком. В рамках установки я пошел с маршрутизатором пользовательского интерфейса. Я настроил конечные точки API сервера и протестировал их в браузере. Они все проверяют.

Я пытаюсь выполнить минимальный запрос http.post для вызова этих конечных точек API. С помощью Yeoman я предварительно сгенерировал новый маршрут «signIn» в client/app/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
person Koen De Couck    schedule 02.06.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не совсем понимаю, что вы пытаетесь сделать, но я надеюсь, что этот код поможет вам:

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>, вы можете сделать это в контроллере.

person Emidomenge    schedule 03.06.2016
comment
Лаконичное решение лаконичной проблемы, именно то, что мне было нужно! Спасибо, Эмидом! - person Koen De Couck; 03.06.2016