Consider this app to be broken down in to two parts. First part is the Angular 2 part which consist of user form and other front end communication things. Second part is the Node.js server which will receive the data from the Angular 2 form. Lets begin with first part consisting of user form and communication service using Angular 2.
Setting up the project and Angular environment can be done referring to my previous blog on Angular 2 routing. We will be using angular-cli for this purpose. Let's begin by generating the project using command "ng new *project-name* --routing". Please refer below screen-shot for more information on success of project creation.
By default any new angular-cli blank project renders app.component. App component is the default root component for project. We will not be creating any new component for using the forms but we will modify the app.component. Every component in Angular 2 has a template which contains the view of the component. We will modify the template or view of app.component. The templates in Angular 2 by default are HTML files. We will add a form with two input fields and a submit button as shown below:
If we refer the above form, we can see few attributes from Angular 2 have been added to validate the form and submit it. FormGroup is used to define forms in Angular, along with FormControl. The user should be able to submit this form after filling it in. The Submit button at the bottom of the form does nothing on its own, but it will trigger a form submit because of its type (type="submit").
We can create service using angular-cli command "ng g service submitform". Once execution of this command is complete a service file is created with the name "submitform.service.ts". We will use HTTP protocol for server communication.
Referring to above code "submitFormData(data)" is the public function which will be accessed by app.component. This function is using POST method for sending form data to node server. The parameter "data" is the information from the app.component.html form fields. Function "submitProcessComplete" is the callback function after response from node.js server is received. Once our service is ready for usage, we will need to add this service to providers list in "app.module.ts" file.
Now we are ready to use submitform.service.ts file. Since our form is added in to app.component.html, we will use this service in app.component.ts file.
Referring to the code above, we are creating here FormGroup and FormControl to manage our Angular 2 form. The validation of the form elements are done using Validators. Lets look into form tag again for more clarification, focus on yellow highlighted items.
Now, we have everything ready from the Angular 2 side which was first part of this blog post. All the details shared above are frontend showing how Angular 2 form is added and connected to service which will be sending the data to the node.js server. If we closely look into "submitform.service.ts" file, we see how the HTTP connection is being established to the server, focus on yellow highlighted items.
Referring to the code above, the HTTP post method is pointing to our server route which we will be creating in the second part of this blog.
To start creating a node.js server, let us create a folder named "server". This folder will contain all our node.js server code and dependencies. To initialize a node.js project navigate to the server folder and run the command "npm init". After this we will install few dependencies depending upon our requirements. In case of this post, we will need "express" and "body-parser" dependencies. We can install each of these dependencies by running the command "npm install *dependency-name* --save".
Referring to the code above, all the yellow highlighted lines are very important to focus.
app.set('port', process.env.PORT || 3200);
The line of code above, defines express server to listen to a port 3200.
The code above, defines router for the express server.
route = require('./app/controllers/' + file); route.controller(app);
The code above, allows all the files in 'app/controllers' folder in 'server' to act as controller. Each controller can independently define their route URLs and act on it as per requirement. For receiving data from our Angular 2 demo-form, we will be creating one controller file. Let us assume the name to be "submitform.controller.js". This controller will just act as a route to receive the HTTP POST data from Angular 2 form and send a response back to the front end.
Refer screen shot below for project structure so far.
Now we have both Angular 2 form(client) and node.js server ready for usage. We will first start our server. Navigate to the server folder and run command "node index". On successful execution we can see result as below screen shot.
Once both our server and client are running, we can send the data from Angular 2 to node.js and receive a response. The complete working example can be seen in video below:
Download completed project file - Click here