角度spa应用程序不工作ngResource

时间:2016-10-25 11:28:34

标签: javascript angularjs mean-stack

在Angular中,ngResource无法正常运行。我添加了脚本引用。问题是,当我将依赖项添加到ngResourc时,会显示空白页面。我该怎么办?

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

app.factory('todoFactory', function($resource) {
  return $resource('/api/meetups');
});*/

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

angular.module('myApp').controller('logoutController',
  ['$scope', '$location', 'AuthService', '$resource',
  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: ''};
  };

*/
   $scope.meetups = [];
  /*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').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 = {};
        });    
    };    
}]);

我将按需添加代码

2 个答案:

答案 0 :(得分:0)

在这种情况下打开调试窗口(F12或命令+ shift + I)总是更好,切换控制台选项卡并检查它的内容。空白页面可以在几种情况下显示。

此外,您可以尝试完成代码的注释版本,以避免像这样的新模块声明^ var app = angular.module(' myApp',[' ngResource']);

app.factory('todoFactory', function($resource) {
  return $resource('/api/meetups');
});

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

    };

}]);

app.controller('logoutController',
  ['$scope', '$location', 'AuthService', '$resource',
  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: ''};
  };

*/
   $scope.meetups = [];
  /*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 = '';
    });
  }*/






}]);

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

    };

}]);

答案 1 :(得分:0)

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

    $scope.logout = function () {

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

您尚未将资源添加到您的功能