【问题标题】:AngularJS 1.5 returning 404 while Express routing is functioningAngularJS 1.5 在 Express 路由运行时返回 404
【发布时间】:2017-01-16 20:19:19
【问题描述】:

我可以通过转到“/api/users”来查看我的数据库数据。 但是,当尝试使用 AngularJS 1.5 获取数据时,我得到了 404。

我认为问题在于 Angular 路由试图在实际 url 不存在时访问它。但我相当确定我的快速路由正在使用该 url 返回任何类型的 GET 上的数据。我对AngularJS真的很陌生,所以请原谅我。

这是我的 Angular

    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 的顺序错了吗?

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    尝试删除 Angular $http.get() 上的 ../ 相对路径。它不应该是相对路径。

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

    同样在 Express 方面,我注意到您获取的路线可能有拼写错误。 '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);
            }
        });
    });
    

    希望对您有所帮助!

    【讨论】:

    • 哇。拼写。做到了。谢谢你。后续我是否正确地说 Angular 路由真的是 AJAX 或承诺,它们只是更改 url 哈希?那是接近还是我错过了什么?谢谢。
    • 实际上您的 $http get/post/etc 应该与您的 Express 资源路由中指定的路径匹配。 Angular 端的 $routeProvider 路由执行哈希导航、HTML 模板加载、控制器初始化等。而 $http 被显式调用以执行 ajax 调用。 Angular 中的路由与 $http/ajax 调用是分开的。我会继续在您的 Express 路由中使用 'api' 或某些标识符,以区分 Express 路由和 Angular 路由。
    猜你喜欢
    • 2015-01-11
    • 2017-03-24
    • 1970-01-01
    • 2018-01-20
    • 1970-01-01
    • 1970-01-01
    • 2021-02-21
    • 2017-08-23
    • 2013-07-27
    相关资源
    最近更新 更多