2016-11-21 4 views
0

こんにちは私はngResourceに問題があります。問題は、ログインページを表示する必要がありますが、localhost:3000に行くと空白のページが表示されることです。 角度コントローラでngResourceのdependencieを宣言します。私がそれを宣言しないなら、evrythingはうまくいく。私の助けてください。そのクラスのプロジェクトとそれは動作する必要があります。ここでngResourceが表示エラーの原因となる

は私の角度コントローラです:

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

    }; 

}]); 

と私のメインのhtmlファイル:

<!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> 

とログインページ部分:

<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> 

私はオンデマンドでより多くのコードを提供します

+1

あなたがngResourceを宣言すると、おそらく依存関係ファイルは/矛盾 –

+0

が欠落しなければならない、あなたのコンソールでは多少の誤差があることが必要になってきていています? –

+0

私はコンソールにエラーがありません助けてください –

答えて

1

$resourceを使用するコントローラまたはサービスを作成する必要があります。 uは空白のページを持っていながら、ここで

あなたは、コンソールにエラーを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(); 
}); 
関連する問題