Mikyas TADESSE Mikyas TADESSE - 1 month ago 10
AngularJS Question

Angular ngResource doesn't work for the controller

Hello evryone am having a problem with angular. I have a SPA the angular code is as it follows :

angular.module('myApp', ['ngResource']).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 = {};
});

};

}]);

angular.module('myApp', ['ngResource']).controller('logoutController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {

$scope.logout = function () {

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

};


/*

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

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

*/
/**
var Meetup = $resource('/api/meetups');

Meetup.query(function (results) {
$scope.meetups = results;
});

$scope.meetups = []

$scope.createMeetup = function () {
var meetup = new Meetup();
meetup.name = $scope.meetupName;
meetup.$save(function (result) {
$scope.meetups.push(result);
$scope.meetupName = '';
});
}


*/



}]);

angular.module('myApp', ['ngResource']).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 = {};
});

};

}]);


when my code is like this i get blank pages. but if i withdraw ['ngResource'] from the declaration off the app evrything works fine . can you help

Answer
// here you define the module with moduleName as 1st argument and dependencies as 2nd argument.
angular.module('myApp', ['ngResource']);

// When you call angular.module('myApp') with just the 1st argument (module name), it returns you the module already defined.

// here you declare a controller in the module already defined.
angular.module('myApp')
  .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 = {};
        });

    };

}]);

// here you declare another controller in the module already defined.
angular.module('myApp')
  .controller('logoutController',
  ['$scope', '$location', 'AuthService',
  function ($scope, $location, AuthService) {

    $scope.logout = function () {

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

    };


/*

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

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

*/
/**
  var Meetup = $resource('/api/meetups');

  Meetup.query(function (results) {
    $scope.meetups = results;
  });

  $scope.meetups = []

  $scope.createMeetup = function () {
    var meetup = new Meetup();
    meetup.name = $scope.meetupName;
    meetup.$save(function (result) {
      $scope.meetups.push(result);
      $scope.meetupName = '';
    });
  }


*/

}]);
// here you declare another controller in the module already defined.
angular.module('myApp')
  .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 = {};
        });

    };

}]);