2016-11-21 95 views
0

你好evryone我有一個ngResource的問題。問題是,當我進入本地主機:3000時,它會顯示一個登錄頁面,我得到一個空白頁面。 我在我的角度控制器中聲明ngResource依賴關係。如果我不宣佈它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

你得到在控制檯中的任何錯誤,而u有一個空白頁? –

+0

我在控制檯中沒有錯誤,請幫忙 –

回答

1

您需要創建一個使用$resource的控制器或服務。

這裏是一個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(); 
});