AngularJS zu Web-API-Aufruf (funktioniert nicht)

Ich versuche, eine API mithilfe von funtion von AngularJS UI mit Factory-Methode aufzurufen.AngularJS zu Web-API-Aufruf (funktioniert nicht)

Ich habe eine onclick funtion (login()) auf der Submit-Schaltfläche auf der Anmeldeseite platziert, die die javascript.js-Funktion aufruft. Die onclick-Funktion ruft die javascript.js-Funktion nicht auf. Ich habe auch getestet, um den Funktionsaufruf zu testen, aber es funktioniert nicht.

Wie man die Fabrik vom Kontroller richtig nennt?

Ich sage den Code unten

Login Seite

<html> 
<head> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<script src="../services/javascript.js"></script> 
<style> 
    body { 
     background: #444343; 
     background: -moz-radial-gradient(center, ellipse cover, #444343 0%, #353434 100%); 
     background: -webkit-radial-gradient(center, ellipse cover, #444343 0%, #353434 100%); 
     background: radial-gradient(ellipse at center, #444343 0%, #353434 100%); 
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#444343', endColorstr='#353434', GradientType=1); 
    } 
</style> 
</head> 

<body > 
<div id="login" data-ng-app="APP"> 
    <form role="form"> 
     <div class="row"> 
      <div class="col-md-4 col-md-offset-4"> 
       <div class=""> 
        <div class="" style="text-center"> 

         <img src="../../content/img/logo.png" class="img-responsive" style="max-width: 50%;margin: 0 auto;"/> 
        </div> 
        <br /> 
        <div class="inner-addon left-addon" style="color:white;"> 
         <i class="fa fa-user"></i> 
         <input type="text" class="form-control input-lg" style="border-radius:4px; background-color:#585858; border: none; color:white;" placeholder="Usuario" data-ng-model="loginData.userName" required autofocus> 
        </div> 

        <br /> 
        <div class="inner-addon left-addon" style="color:white;"> 
         <i class="fa fa-key"></i> 
         <input type="password" class="form-control input-lg" style="border-radius:4px;background-color:#585858; border: none;color:white; " placeholder="Contraseña" data-ng-model="loginData.password" required> 
        </div> 
        <!-- <br /> --> 
        <!-- <div class="checkbox"> 
         <label> 
          <input type="checkbox" ng-model="loginData.useRefreshTokens"> Mantener la sesión activa 
         </label> 
        </div> --> 
        <br /> 
        <button class="btn btn-tmt btn-lg btn-block" type="submit" data-ng-submit="login()"> Empezar </span></button> 
        <a href="Default.html" class="button">Next</a> 
        <div data-ng-hide="message == ''"> 
         <br /> 
         <div class="alert alert-danger"> 
          {{message}} 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 
</div>

javascript.js Funktion

'use strict'; 
angular.module('APP',[]). 
factory('authService', ['$http', '$q', 'localStorageService', 
'ngAuthSettings','$rootScope', 
function ($http, $q, localStorageService, ngAuthSettings, $rootScope) {

var _login = function (Logindaten) { var data = "grant_type = & Passwort username =" + loginData.userName + "& password =" + loginData.password; if (loginData.useRefreshTokens) { data = Daten + "& client_id =" + ngAuthSettings.clientId; }

var deferred = $q.defer(); 

    $http.post('localhost:54495' + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) { 

     if (loginData.useRefreshTokens) { 
      localStorageService.set('authorizationData', { token: response.access_token, userName: response.userName, nombreUsuario: response.nombreUsuario, refreshToken: response.refresh_token, useRefreshTokens: true }); 
     } 
     else { 
      localStorageService.set('authorizationData', { token: response.access_token, userName: response.userName, nombreUsuario: response.nombreUsuario, refreshToken: "", useRefreshTokens: false }); 
     } 
     _authentication.isAuth = true; 
     _authentication.userName = response.userName; //loginData.userName; 
     _authentication.nombreUsuario = response.nombreUsuario; 
     _authentication.tipoPerfil = response.tipoPerfil; 
     _authentication.useRefreshTokens = loginData.useRefreshTokens; 
     $rootScope.userName = response.userName; 
     $rootScope.nombreUsuario = response.nombreUsuario; 
     //$rootScope.tipoPerfil = response.tipoPerfil; 

     deferred.resolve(response); 

     _loginInfo(); 

    }).error(function (err, status) { 
     console.log("err", err); 
     _logOut(); 
     deferred.reject(err); 
    }); 

    return deferred.promise; 

}; 


}]);

Quelle

2017-06-09 krazyhamad

Dieser Code ist nicht vollständig. Wo ist dein Controller und was ist der Fehler, vor dem du stehst? – 31piy

Sie sollten Ihren Contoller definieren und Ihre Fabrik in die Steuerung injizieren. Dann tun Sie http Anruf. Es wird wie erwartet funktionieren. –

Ich habe myFactory aktualisiert, wie ich Login-Funktion von einem Controller aus aufrufen. – krazyhamad

//So let's say you have define the myFactory 

//defining factory 
app.factory('myFactory', function() { 
    var serviceObj = {}; 
    serviceObj.name = ''; 
    serviceObj.setName = function (newName) { 
     serviceObj.name = newName; 
}; 
    return serviceObj; 
}); 


//then to use it 

    app.controller('myController', function ($scope, myFactory) { 

     myFactory.setName("Saksham Chauhan"); 
     $scope.factoryName = myFactory.name;  

    });

Quelle

2017-06-09 05:08:30

Ich habe myFactory aktualisiert, wie ich Login-Funktion von einem Controller – krazyhamad

aufrufen Ich übergeben meine erstellte Fabrik in der Steuerung wie der $ scope überprüfen Sie den obigen Code –

AngularJS zu Web-API-Aufruf (funktioniert nicht)

Antwort

Verwandte Themen