Angularjs 在使用express.js时，如何使用json的结果填充html文件？_Angularjs_Node.js_Twitter Bootstrap_Express_Mean Stack

Angularjs 在使用express.js时，如何使用json的结果填充html文件？

angularjs node.js twitter-bootstrap express

Angularjs 在使用express.js时，如何使用json的结果填充html文件？,angularjs,node.js,twitter-bootstrap,express,mean-stack,Angularjs,Node.js,Twitter Bootstrap,Express,Mean Stack,我有一个带有小index.html页面的网页： ... <body> <div id="photos"> </div> </body> ... 当用户转到mydomain.com时，他会看到那个空的html文件。现在，正如您在我的server.js中看到的，我有可能在查询中包含hashtag，因此用户可以键入mydomain.com/test。目前，当他这样做时，他看到的只是一个json文件，它要么是空的： [] 或者有一些内容

我有一个带有小

index.html

页面的网页：

...
<body>
    <div id="photos">
    </div>
</body>
...

当用户转到

mydomain.com

时，他会看到那个空的html文件。现在，正如您在我的

server.js

中看到的，我有可能在查询中包含hashtag，因此用户可以键入

mydomain.com/test

。目前，当他这样做时，他看到的只是一个json文件，它要么是空的：

[]

或者有一些内容：

[{"_id":"some_id","photo_url":"some_url","hashtags":["photo","test"]},
{"_id":"some_id2","photo_url":"some_url2","hashtags":["photo2","test"]}]

如何显示嵌入了这些图像的网页，而不是向用户显示纯json？

为您的应用程序配备模板引擎：

app.use(express.static(__dirname + '/public'));
app.use('/bower_components',  express.static(__dirname + '/bower_components'));
app.set('trust proxy');
// config views =============================================
app.set('views', './views') // specify the views directory
app.set('view engine', 'ejs') // register the template engine
=============================================================

使用

res.render（）

而不是

res.json（）

使用所需数据呈现模板：

app.get('/:hashtag', function(req, res){
    var query = Photo.find({"hashtags":{$in: [req.params.hashtag]}});
        query.exec(function(err, photos) {
            if(err) {
                sendError(res, err);
                return;
            }
            // res.json(photos);
            res.render('index', { title: 'my photos', photos: photos })
    });
});

在

index.html

中，循环收集并打印照片：

...
<body>
    <div id="photos">
       <% photos.forEach(function(photo) { %>
          <img src=<% photo.photo_url %> >
       <% }); %>
    </div>
</body>
...

。。。
>
...

请注意，您的

index.html

应该位于

/views/index.html

路径中；当我们为我们的视图设置此路径时。

您可能希望查看例如，谢谢，它当然有效：）但还有一个问题-现在，当用户在域名后提供任何标签时，它就有效了。如何使它运行query

var query=Photo.find（）当用户不提供任何标签时？例如，当他转到mydomain.com/hashtag
时，它现在会查找具有特定hashtag的所有照片，但是我应该如何修改server.js文件以支持mydomain.com
上的条目？@user3766930定义根路由：app.get（'/'，…
就像app.get（'/:hashtag'，…
和运行var query=Photo.find（）query获取所有照片并提供服务，就像我们使用hashtaged版本所做的一样，并查看文档；）
...
<body>
    <div id="photos">
       <% photos.forEach(function(photo) { %>
          <img src=<% photo.photo_url %> >
       <% }); %>
    </div>
</body>
...