2016-11-21 6 views
0

Hallo Evryone Ich habe ein Problem mit ngResource. Das Problem ist, dass ich eine leere Seite bekomme, wenn ich zu localhost: 3000 gehe, während es eine Login-Seite anzeigen sollte. Ich deklariere die ngResource Abhängigkeit in meinem Winkelregler. Wenn ich es nicht erkläre, funktioniert alles gut. Bitte hilf mir .. es ist ein Klassenprojekt und es muss funktionieren.ngResource verursacht Anzeigefehler

Hier ist mein Winkelregler:

var app = angular.module('myApp', ['ngResource']); 

app.controller('loginController', 
    ['$scope', '$location', 'AuthService', 
    function ($scope, $location, AuthService) { 

    $scope.login = function() { 

     // initial values 
     $scope.error = false; 
     $scope.disabled = true; 

     // call login from service 
     AuthService.login($scope.loginForm.username, $scope.loginForm.password) 
     // handle success 
     .then(function() { 
      $location.path('/'); 
      $scope.disabled = false; 
      $scope.loginForm = {}; 
     }) 
     // handle error 
     .catch(function() { 
      $scope.error = true; 
      $scope.errorMessage = "Invalid username and/or password"; 
      $scope.disabled = false; 
      $scope.loginForm = {}; 
     }); 

    }; 

    $scope.posts = []; 
    $scope.newPost = {created_by: '', text: '', created_at: ''}; 

    $scope.post = function(){ 
    $scope.newPost.created_at = Date.now(); 
    $scope.posts.push($scope.newPost); 
    $scope.newPost = {created_by: '', text: '', created_at: ''}; 
    }; 
}]); 

app.controller('logoutController', 
    ['$scope', '$location', 'AuthService', 
    function ($scope, $location, AuthService) { 

    $scope.logout = function() { 

     // call logout from service 
     AuthService.logout() 
     .then(function() { 
      $location.path('/login'); 
     }); 

    }; 

    $scope.gotoregister = function() { 




      $location.path('/register'); 


    }; 

}]); 

app.controller('registerController', 
    ['$scope', '$location', 'AuthService', 
    function ($scope, $location, AuthService) { 

    $scope.register = function() { 

     // initial values 
     $scope.error = false; 
     $scope.disabled = true; 

     // call register from service 
     AuthService.register($scope.registerForm.username, $scope.registerForm.password) 
     // handle success 
     .then(function() { 
      $location.path('/login'); 
      $scope.disabled = false; 
      $scope.registerForm = {}; 
     }) 
     // handle error 
     .catch(function() { 
      $scope.error = true; 
      $scope.errorMessage = "Something went wrong!"; 
      $scope.disabled = false; 
      $scope.registerForm = {}; 
     }); 

    }; 

}]); 

und meine Haupt-HTML-Datei:

<!doctype html> 
<html ng-app="myApp"> 

<head> 
    <meta charset="utf-8"> 
    <title>MEAN Auth</title> 
    <!-- styles --> 
    <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.6/yeti/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 

    <div class="container"> 
    <div ng-view></div> 
    </div> 

    <!-- scripts --> 
    <script src="//code.jquery.com/jquery-2.2.1.min.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-resource.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.min.js"></script> 
    <script src="./main.js"></script> 
    <script src="./services.js"></script> 
    <script src="./controllers.js"></script> 
    <script src="./chirpApp.js"></script> 
</body> 
</html> 

und die Login-Seite teilweise:

<div class="col-md-4"> 
    <h1>Login</h1> 
    <div ng-show="error" class="alert alert-danger">{{errorMessage}}</div> 
    <form class="form" ng-submit="login()"> 
    <div class="form-group"> 
     <label>Username</label> 
     <input type="text" class="form-control" name="username" ng-model="loginForm.username" required> 
    </div> 
    <div class="form-group"> 
     <label>Password</label> 
     <input type="password" class="form-control" name="password" ng-model="loginForm.password" required> 
     </div> 
     <div> 
     <button type="submit" class="btn btn-default" ng-disabled="disabled">Login</button> 
     </div> 
    </form> 
</div> 

ich mehr Code auf Anfrage zur Verfügung stelle

+1

Wenn Sie erklären ngResource muss es einen Fehler in der Konsole sein höchstwahrscheinlich die Abhängigkeitsdatei fehlen muss/Konflikt –

+0

erhalten Sie Fehler in der Konsole, während u eine leere Seite haben ? –

+0

Ich habe keinen Fehler in der Konsole bitte helfen –

Antwort

1

Sie müssen einen Controller oder Dienst erstellen, der $resource verwendet. Hier

ist ein example

var app = angular.module('plunker', ['ngResource']); 

app.controller('MainCtrl', function($scope, $resource) { 
    var dataService = $resource('http://run.plnkr.co/5NYWROuqUDQOGcKq/test.json'); 
    $scope.data = dataService.get(); 
});