Ways of connecting Node in MEAN Stack
In our previous sections, we learned about the basics of angular. We used form, property, and event binding, created the model, and used it in our project. We also learned about the project structure and angular components. We got the details about service and observables also.
In the upcoming few sections, we will learn about Node and Express. We will learn how we can connect the Node and add an express framework. We will also use both of them in our project. So, in this section, we will learn about Module and how we can connect the Node & Angular.
Previously, we used ngServe, and typically the ngServe uses nodejs server behind the scenes. The ngServe only gives us a development server. The development server means that it is a server aimed at angular development. It is not a production-ready server, and it certainly doesn’t contain any of the logic that we want to add to our server-side. The ngServe also doesn’t give us an entry point to add such logic.
It is just a server that returns the angular app. It also has useful features like auto-restart whenever we have a new angular app version. So, ngServer is nice for developing our angular application. We cannot use this server as a backend because there is one important thing we have to understand i.e., how angular and a node backend work together.
We have two ways of connecting a node and angular backend:
1) In the first approach, we have a node application or a node express application that serves the angular single page application. It contains our other server-side logic, but it also has a certain path, i.e., a URL endpoint to which we can send a request where it will return that angular single page application.
We have our node express backend, which handles incoming requests. It is not just the request for the angular app but also requests sent by the angular app. This is because angular sends background http requests to store and fetch data. These http requests need to be handled by the node express backend.
So, we have the endpoints for this, and we have a special endpoint, i.e., the /path. If we just send the simple request, we return the angular single page application to request any other path.
2) The alternative approach is that we have two separate servers, i.e., first is our node express server for our business logic, for the authentication, for the data storage, and another is a separate static host which only returns our angular single page application.
We still have our node express app handling incoming requests because we have these angular background requests. But, we also need to serve our single page application from a separate static host. A static host is just a simple server, and it could be any server like a node server, an Apache, and an Nginx server. So, it could be any server that doesn’t run any server-side logic but simply returns html, JavaScript, and CSS files.
In both cases, we need logically separated apps build. So, even if we use the same node server for serving both the angular app and hosting our core business logic, we have separated apps in the sense that angular handles the UI and sends background requests and node express handles these background requests and does something with them.
The only difference is that we got one special route or special path in the first approach where we return the angular app, but that’s all besides that, there is no strict connection because what we build is a restful API with our node express backend.
In the next section, we will connect out application with the node backend.