简单平均堆栈应用程序的奇怪流程

Question

这是我对简单均值堆栈应用程序的实现

server.js

var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('contactlistDB', ['contactlist']);

app.use(express.static(__dirname + "/public"));

app.get('/friendlist', function(req, res){

    db.on('connect', function(){
        console.log("DB connected !!!");
    });

    console.log("received GET request");
    db.contactlist.find(function(err, docs){
        res.send(docs);
    });
});

app.listen(3000);

controller.js

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
    console.log("Hello World from controller");
    $http.get('/friendlist').success(function(response){
      $scope.friendList = response;
    })
}]);

index.html

<!DOCTYPE>
<html ng-app="myApp">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<title>Friends Information App</title>
<body>
      <div class="container" ng-controller="AppCtrl">
    <h1>Friend Information App</h1>

    <table class="table">
      <thead>
        <tr>
          <th>Name</th>         
          <th>Email</th>
          <th>Number</th>
        </tr>
        <tr ng-repeat="friend in friendList"> <!-- same as for loop -->
          <th>{{friend.name}}</th>
          <th>{{friend.email}}</th>
          <th>{{friend.number}}</th>
        </tr>
      </thead>
    </table>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</head>
</html>

我的路线肯定是 /friendlist 但我不知道为什么，当我刚点击 thr url http://localhost:3000, all my friends information are shown up with the UI in index.html file. And when hitting the http://localhost:3000/friendlist 时，我得到的只是 json 没有 [=30] 的普通文本=]

请帮我解释一下这个案例的工作流程。非常感谢！

Answer 1

当您点击 http://localhost:3000 you reach your web page which contains all your UI stuff. By hitting http://localhost:3000/friendlist 时，您正在请求 API 打印您的 JSON 对象。这是因为您使用行 app.use(express.static(__dirname + "/public")); 通过 API 为您的 html 提供服务。这是正常行为。

Answer 2

First of all 
app.get('/friendlist', function(req, res){

    db.on('connect', function(){
        console.log("DB connected !!!");
    });

    console.log("received GET request");
    db.contactlist.find(function(err, docs){
        res.send(docs);
    });
});

it is called which redirects to the get method in /friendlist controller function.

Under that 
 $http.get('/friendlist').success(function(response){
      $scope.friendList = response;
    })
it is called and it gives the response in friendlist var. and it prints out the thing accordingly.

简单平均堆栈应用程序的奇怪流程

Weird flow of simple mean stack application

node.js

angularjs

angularjs-routing

mean-stack