Einfacher http.post mit angular-fullstack (mit ui-router)

Kontext: Ich habe gerade mit AngularJS begonnen, ausgehend von einem sauberen Generator-Angular-Fullstack-Build. Als Teil der Installation ging ich mit UI-Router. Ich habe Server-API-Endpunkte eingerichtet und im Browser getestet. Sie alle checken aus.Einfacher http.post mit angular-fullstack (mit ui-router)

Ich versuche eine minimale http.post Anfrage, um diese API-Endpunkte aufzurufen. Via Yeoman habe ich eine neue route 'signIn' in client/app/signIn (die signIn.html, signIn.js, signIn.controller.js, signIn.controller.spec.js, signIn.scss) enthält, vorgeneriert. Hier

ist das, was ich arbeite aus:

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>

Der Vollständigkeit (noch unberührt :)

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 
    }); 

})();

Ich habe eine Reihe von Variationen über das signIn.html Skript versucht, nicht so weit Glück. Ich würde gerne den "nativen" Weg dazu finden, also würde ich jquery lieber nicht verwenden. Jeder Rat würde geschätzt werden!

Quelle

2016-06-02 Koen De Couck

Ich verstehe nicht genau das, was Sie versuchen, diesen Code zu tun, aber ich hoffe, dass wird Ihnen helfen:

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 
    }); 

})();

Hinweis: nicht ng-controller="" in Ihren HTML-Dateien setzen Sie, weil sie bereits durch den Generator genannt werden, und sie werden zweimal oder sogar noch mehr genannt werden, die einige Probleme in Ihrer Anwendung produzieren könnte und die Leistung reduziert auch .

In den meisten Fällen, wenn Sie versuchen, <script> Tag verwenden, können Sie es im Controller tun.

Quelle

2016-06-03 07:56:44 Emidomh

Eine knappe Lösung für ein kurzes Problem, genau das, was ich brauchte! Danke Emidomh! –

Einfacher http.post mit angular-fullstack (mit ui-router)

Antwort

Verwandte Themen