Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points
Posted by stjarnan
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

How to wire Angular to back-end?

Hi all!

I have been learning Angular and would like to start a side-project just to practice. I want to create a mean app (I have been using Node, Express and databases at work to create Rest APIs), but my question is, how would I wire Angular to the back-end? What is the common practice when it comes to mean apps? Do you build a Rest API that Angular calls to while hosting them at different locations? Or do you Integrate Angular in the Express app somehow?

Basically, how do you wire them up together and how does it work?

I would really appreciate any help or information provided.

Thanks in advance

Jonas

2 Answers

Rune Andreas Nielsen
Rune Andreas Nielsen
5,354 Points
Rune Andreas Nielsen
Rune Andreas Nielsen
5,354 Points

Hi, Stjarnan.

The standard way to "bind" your Angular application together with your back-end is by creating REST API's for the client-side application to consume.

When it comes to hosting, you can host your angular application on the same server as your back-end application.

Another approach is to host the client-side application on a separate server from the back-end application. The reason for this is to be able to deploy the back-end application separate from the client-side application and the other way around.

Both ways are viable, but if you're new I think you should start with deploying the client-side and the server-side together.

Evgeniia Mas
Evgeniia Mas
4,452 Points
Evgeniia Mas
Evgeniia Mas
4,452 Points

Hello!

Use npm. I send you basic package.json file (which keeps the information about your project) and used to install your node modules. Here is not very updated (to current versions of modules) approximate example, sorry, have nothing more better by my hand right now, but you can see just the core of what I mean - Angular with Express as you ask. Having similar json with your packages, you can install all modules at once. If you don't know what will be used you can add some modules later. 

{
  "name": "votesbox",
  "description": "A full stack votes box",
  "version": "1.0.0",
  "author": {
    "name": "Evgeniia"
  },

"dependencies": {
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/core": "2.1.1",
"@angular/forms": "2.1.1",
"@angular/http": "2.1.1",
"@angular/platform-browser": "2.1.1",
"@angular/platform-browser-dynamic": "2.1.1",
"@angular/router": "3.1.1",
"body-parser": "1.15.2",
"core-js": "2.4.1",
"compression": "1.6.0",
"connect-flash": "0.1.1",
"ejs": "2.5.2",
"express": "4.14.0",
"express-session": "1.14.1",
"method-override": "2.3.6",
"mongoose": "4.6.5",
"morgan": "1.7.0",
"mongodb": "~2.2.25",
    "passport": "~0.3.2",
    "passport-vkontakte": "~0.3.2",
    "passport-facebook": "~2.1.1"

},
  "engines": {
    "node": "4.2.4"
  },
  "scripts": {
    "start": "node server.js"
  }
}