Node.js 无法从angular调用express rest api_Node.js_Angularjs_Express

Node.js 无法从angular调用express rest api

node.js angularjs express

Node.js 无法从angular调用express rest api,node.js,angularjs,express,Node.js,Angularjs,Express,我将在nodejs上使用express和AngularJS构建一个单页应用程序我试图从angular模块调用WebAPI，但我一直在接收整个页面的html内容，而不是实际值  <!doctype html>  <html ng-app="scotchTodo"> <head>

我将在nodejs上使用express和AngularJS构建一个单页应用程序

我试图从angular模块调用WebAPI，但我一直在接收整个页面的html内容，而不是实际值

<!-- index.html -->
<!doctype html>

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

    <title>Node/Angular Todo App</title>

    <!-- SCROLLS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
    <style>
        html                    { overflow-y:scroll; }
        body                    { padding-top:50px; }
        #todo-list              { margin-bottom:30px; }
    </style>

    <!-- SPELLS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
    <script src="core.js"></script>

</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
<div class="container">

    <!-- HEADER AND TODO COUNT -->
    <div class="jumbotron text-center">
        <h1>I'm a Todo-aholic <span class="label label-info">{{ todos.length }}</span></h1>
    </div>

    <!-- TODO LIST -->
    <div id="todo-list" class="row">
        <div class="col-sm-4 col-sm-offset-4">

            <!-- LOOP OVER THE TODOS IN $scope.todos -->
            <div class="checkbox" ng-repeat="todo in todos">
                <label>
                    <input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.text }}
                </label>
            </div>

        </div>
    </div>

    <!-- FORM TO CREATE TODOS -->
    <div id="todo-form" class="row">
        <div class="col-sm-8 col-sm-offset-2 text-center">
            <form>
                <div class="form-group">

                    <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                    <input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text">
                </div>

                <!-- createToDo() WILL CREATE NEW TODOS -->
                <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
            </form>
        </div>
    </div>

</div>

</body>
</html>

但我得到的不是我试图传递的值，而是完整的html：

您只需要更改服务器代码，这样只有当get请求发送到“/”时才会返回index.html。您当前已将其设置为在任何与“*”匹配的get请求上返回index.html…因此，所有内容都是如此

app.get('/', function (req, res) {
    res.sendfile('./public/index.html');
});

这条路线

// application
app.get('*', function (req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

。。。正在响应所有GET请求，因为它位于/api/something路由之前。或者用/api/something路由交换它

或者不要使用通配符

app.get('/', function (req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

// application
app.get('*', function (req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

app.get('/api/something',function(req,res){
    res.json({text: "1"});
});

app.get('*', function (req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

app.get('/', function (req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});