CODEWITHSUNDEEP
javascriptangularjsnode.js
Scooter
Scooter

Reputation: 1079

Setup AngularJS and NodeJS on Xampp Web server

I'm working on creating a web application that uses AngularJS's data binding tactics to create a very nice frontend based on the backend data model. However, the backend data needs to come from incoming HTTP post requests, which I've figured out I'm going to use NodeJS to handle.

Right now I'm using an Xampp local web server to do all the testing, and here is the file structure I've setup.

setup

As you can see, I've created a website directory for my website files, and when I visit localhost/websitein my browser, the page loads the files I have. Currently, I have Angular up and running with this source code:

<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app>
    <h1>{{80/5}}</h1>
  </body>

</html>

And the only text on the page is 16, as it is expected.

My question is, how can I also have a NodeJS server running at the same location (localhost/website) so that when HTTP requests are sent to this web URL, they are intercepted and handled by Node, which can pass the results that are processed directly to Angular to handle the frontend stuff? Can you create the Node server inside of the script.js file I have? And what host/port would I use to grab the incoming HTTP requests?

Upvotes: 0

Views: 4948

Answers (1)

Gandalf the White
Gandalf the White

Reputation: 2465

Scotty Xampp Runs based on file structure, you designate one port using it's settings and then you access folders.

To use Node JS you must install node js and in node js you can set port of your choice and then you can access your content using localhost:your port number.

To make request to server you must make a call using Angular's controller.

If you are a beginner I suggest this tutorial to you.

https://www.youtube.com/playlist?list=PLX2HoWE32I8Nkzw2TqcifObuhgJZz8a0U

Check the first video of the playlist, that'll do what you want.

The playlist is for Mongodb as well if your are not using it don't refer to whole playlist. Ask me if you need more clarification.

Upvotes: 1

Related Questions