在nodejs中从客户端将html发送到浏览器

Question

From: Book - Getting MEAN with Mongo, Express..

Views: HTML responses It's likely that you'll want to respond to many of the requests to your application by sending some HTML to the browser. By now it will come as no surprise to you that Express makes this easier than it is in native Node.js. Express provides support for a number of different templating engines that make it easier to build HTML pages in an intelligent way, using reusable components as well as data from your application. Express compiles these together and serves them to the browser as HTML .

They are saying that Express supports many templating engines which can easily send html to browsers.
My question here is that if we are using MEAN this means that Angular is used as a frontend and this also means that displaying data on browser should be the responsiblity of Angular.

Nodejs should send data to Angular and Angular should display it on browser. If this understanding is correct then why would templating engines of Express be required?

Is this quoted paragraph assuming that there is no Angular present therefore the html has to be sent directly to browser from nodejs?

Answer 1

Is this quoted paragraph assuming that there is no Angular present therefore the html has to be sent directly to browser from nodejs?

You are correct here. Express can send HTML files in the response, but if you have a separate backend for your application (and many applications do), then Express would send the data to your frontend and Angular would take care of HOW that data is displayed.

This is an example of Express sending a file on a route request.

const express = require('express');
const app = express();
const path = require('path');

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

Answer 2

YES, You are right .

If Angular is there, All the templates will be built on Angular , So it's enough to pass the data which has be shown using APIs . If not , You need to render the complete HTML View , So the Template Engine will be helpful.

In the Paragraph , The are taking about VIEW in MVC , So they are assuming there is no front-end frameworks + API calls .

Answer 3

There are many ways that you can use an express server.

1. One of a way and also the most common/ traditional way is to use express js as a normal web server which controller get user request then Models deals with the data & finally passing that data to View ( which is MVC ) to render the full html page and send it back to the client.

   So it doesn't matter what is your front end, Weather it is Angular, React or Vanilla , express doesn't care about it. For express, all 3 types ( Angular, React, Vanilla ) are bunch of JS files & Html file/s. So either you can serve these static files directly as html files or else, you can also use a template engine to serve those files. Think about a situation where you want do attach some data array to a <script></script> tag of your Angular/ React or Vanilla html file. Now you have to use template engine to do that.

2. Second way is using express server as an CRUD / RESTfull or Graphql API to serve JSON data. In this case we keep our static files ( HTML, css, js ) in separate express server which only for serve those files to client. And separate express Data API for interact with the database. So once the static files rendered to browsers, client side JS send request to the express API to get additional data that need to complete the application.

3. A third way is using express js to server side render (SSR) the Angular / React. Long time ago I created an express server to render React JS on server before send to the client. This way I was able to manage good SEO and give visual to the client as soon as possible while managing single page features ( Similar to how NextJS works ). With this render server I had separate RESTapi which access to the database.

Nodejs should send data to Angular and Angular should display it on browser. If this understanding is correct then why would templating engines of Express be required?

As I said in above, what if you want to attach some data ( Or something else ) from data base to the Angular html file before it send to the client,

<script>
  window.__MY_DATA__ = dataFromDb
</script>

You need to use a template engine.( But not for all use cases. Most of the time not required when using Angular/ React )