How would I implement Node.js into an Ionic / Angular application?

Question

I've currently got a base "tabs" Ionic / Angular application.

ionic start testproject tabs

I've gone ahead and done an npm install to get some of the basic node modules in the project directory.

I'm a little confused about how to use Angular and Express together, and how to set up the node / server end of things. I've tried looking at a bunch of tutorials, and find myself getting a little lost in the mix, so I'm hoping someone will have some resources that might help push me in the right direction.

Because Angular and Express both do MVC / MV* -- It's starting to get really confusing as to what does what. I'm confused on setup and how to get them to talk together.

Please let me know what other information I can give, as I'm not sure what else. (The project is pretty bare bones.)

Thank you so much!

Answer 1

Standard Angular Web App

When building a MEAN web app you should start by creating an Express application with Express-Generator these commands (assuming you have node and express installed global)

$ express myapp

to build the app

$ cd myapp

to enter the app

$ npm install

to install the dependencies from the package.json file

File Structure

.
├── app.js
├── bin
│   └── www
├── models
│   └── home.js
├── node_modules
├── package.json
├── public // your Angular app goes here
├── README.md
├── routes
│   ├── home.js
│   └── users.js
└── views

So above we can see the basic structure of the app. You should have something similar after running Express generator. You will take your Angular app and put it into the public folder and run the server with

$ DEBUG=myapp npm start

Ionic

With an Ionic app you want an app for a phone that someone will, because of that you wont need to add the app to the public folder here. What you will use Express for is to create an api for your app to call. You can create a simple web api with a server.js file that you can run with

$ node server.js

In your Angular Factories and Services you can make $http calls directly to your api.

Update

Currently working on a boilerplate to split back and front end of a mean app, this means that you will be able to serve the exact same backend to you android app, ios app and your web app.

Its a work in progress but feel free to check it out for ideas or to start your own separate front and back end MEAN stack. https://github.com/joeLloyd/MEANBoilerPlate

Answer 2

It seems you were confused by the term MVC and its meaning. MVC (Model, View, Controller) is just a general pattern for the structure of an application.

When writing a web application with angular, you are actually writing two applications (in most cases):

Your frontend application, the one that runs in your browser, using HTML, JS and CSS (and frameworks like angular on top of them), displaying data to the user and allowing them to interact with it. And the backend application, the one that runs on your server (for example on node or Spring or RubyOnRails...), storing the data, serving it and calculating the business logic.

Those two applications can both independently be structured using an MVC pattern. However that does not influence how they work together - they are completely independent and communicate using the HTTP protocol (using AJAX on the frontend). So to your angular frontend application, it does not matter if the backend application runs on Node or anything else.

Just to explain the names int hat context:

Node is a backend framework, running the server, doing business logic and talking to the database. Express is a module for Node that makes it easier to write HTTP APIs in Node.

Ionic and Angular are frontend frameworks. They allow you to create frontend applications more easily.

I hope that helped a bit, its a pretty huge topic and its not really possible to explain all of it in a reasonably sized StackOverflow answer.