Mikyas TADESSE Mikyas TADESSE - 12 days ago 6
AngularJS Question

ngResource causing display error

Hello evryone i am having a problem with ngResource. The problem is that i get a blank page when i go to localhost:3000 while it should display a login page.
I declare the ngResource dependencie in my angular controller. If i dont declare it evrything works fine. Please help me.. its a class project and it has to work.

Here is my angular controller :

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

};

}]);


and my main html file :

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


and the login page partial:

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


I will provide more code on demand

Answer

You need to create a controller or service that uses the $resource.

Here is an 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();
});
Comments