2017-01-16 6 views
1

"/ api/users"に移動してdbデータを表示できます。 しかし、AngularJS 1.5でデータを取得しようとすると、404が表示されます。AngularJS 1.5 Expressルーティングが機能している間に404を返します

Angularルーティングが存在しない場合、その実際のURLに到達しようとしていると考えられます。しかし私は、私の急行経路が、そのURLを使ってGETのあらゆる種類のデータを返すことはかなり確かです。私はAngularJSにとって本当に新しいので、私を許してください。

は、ここに私は角

var app = angular.module('app', ['ngRoute']); 
    app.controller('HomeController', function($http){ 
     var vm = this; 
     vm.title = "Users"; 
     vm.users = []; 
     vm.getUsers = function(){ 
      $http.get('../api/users').then(function(response){ 
       vm.users = response.data; 
      }, 
      function myError(response) { 
       vm.title = response.statusText; 
      }); 
     }; 
     vm.getUsers(); 

     return true; 
    }); 
    app.config(function($routeProvider) { 
     $routeProvider.when('/', { 
      controller: 'HomeController', 
      controllerAs: 'vm', 
      templateUrl: './home.html' 
     }); 
     $routeProvider.otherwise('/'); 
    }); 

は、ここで私はおそらくここには本当に基本的な何かが欠けているserver.js

var Model = require('./models/models.js'); 
var express = require('express'); 
var mongoose = require('mongoose'); 
var bodyParser = require('body-parser'); 
var morgan = require('morgan'); 
var app = express(); 
var db = "mongodb://localhost/mean_stack"; 

mongoose.connect(db, function(err, response){ 
    if(err){ 
     console.log('Failed to connect to ' + db); 
    }else{ 
     console.log('Successfully connected to ' + db); 
    } 
}); 

var router = express.Router(); 


router.get('/apis/users', function(request, response){ 
    Model.find({}, function(err, users){ 
     if(err){ 
      response.status(404).send(err); 
     }else{ 
      response.status(200).send(users); 
     } 
    }); 
}); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 
app.use('/', router); 
app.use(morgan('dev')); 
app.use(express.static(__dirname + '/public')); 
var port = process.env.PORT || 3000 
app.listen(3000, function(){ 
    console.log('Listening on port ' + port); 
}); 

だだ、私はちょうどそれを把握するように見えることはできません。私はまた、私が作業しているチュートリアルのコードとそれをテストし、インストラクターのコードは素晴らしい仕事です。 私のserver.jsの順序が間違っていますか?

答えて

1

角度$http.get()../相対パスを削除してみます。相対パスであってはなりません。 Expressの側にも

var app = angular.module('app', ['ngRoute']); 

app.controller('HomeController', function($http) { 
    var vm = this; 
    vm.title = "Users"; 
    vm.users = []; 
    vm.getUsers = function() { 
     $http.get('api/users').then(function(response) { 
       vm.users = response.data; 
      }, 
      function myError(response) { 
       vm.title = response.statusText; 
      }); 
    }; 
    vm.getUsers(); 

    return true; 
}); 
app.config(function($routeProvider) { 
    $routeProvider.when('/', { 
     controller: 'HomeController', 
     controllerAs: 'vm', 
     templateUrl: './home.html' 
    }); 
    $routeProvider.otherwise('/'); 
}); 

、私はあなたがルートがスペルミスを有していてもよく得ることに気づきました。事故によって 'api'に 's'が追加されましたか?

router.get('/api/users', function(request, response){ 
    Model.find({}, function(err, users){ 
     if(err){ 
      response.status(404).send(err); 
     }else{ 
      response.status(200).send(users); 
     } 
    }); 
}); 

うまくいけば助けてください!

+0

うわー。つづり。それがそれでした。ありがとうございました。フォローアップ私は角度ルーティングが実際にAJAXまたは約束であり、彼らは単純なURLのハッシュを変更すると言って正しいですか?それが近いのですか、私は何かが欠けていますか?ありがとうございました。 – Tamb

+0

あなたの$ http get/post/etcは、あなたのExpressのリソースルートで指定されたパスと一致する必要があります。 Angular側の$ routeProviderルートは、ハッシュナビゲーション、HTMLテンプレートの読み込み、コントローラの初期化などを実行しています。$ httpを明示的に呼び出してajax呼び出しを実行します。 Routing in Angularは$ http/ajax呼び出しとは別です。 ExpressルートをAngularルートと区別するために、「api」または特定の識別子をExpressルートに追加していきます。 –

関連する問題