Question

你好evryone我遇到了ngResource的问题。问题是当我转到localhost：3000时我得到一个空白页面，而它应该显示一个登录页面。我在我的角度控制器中声明了ngResource dependencie。如果我不宣布它evrything工作正常。请帮助我..它是一个类项目，它必须工作。

这是我的角度控制器：

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>

我将按需提供更多代码

Answer 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();
});

ngResource导致显示错误

1 个答案: