How to implement Node.js in an Ionic / Angular app?

Question

I currently have the basic Ionic / Angular tabs.

ionic start testproject tabs

I went ahead and did npm install to get some of the base node modules in the project directory.

I am a bit confused about how to use Angular and Express together, and how to configure the end of node / server. I tried to look at a bunch of tutorials and find myself a little lost in the mix, so I hope someone has the resources that can help me in the right direction.

Because Angular and Express both do MVC / MV * - it starts to get very confused as to what it is doing. I got confused about the 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 very much!

Answer 1

Standard Angular Web Application

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

$ express myapp

to create an application

$ cd myapp

to enter the application

$ npm install

to install 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, we see the main structure of the application. You should get something similar after starting the Express generator. You will accept your Angular application and put it in a shared folder and start the server using

$ DEBUG = myapp npm start

Ionic

In the Ionic app, you need a phone app that someone will be, because of this you will not need to add the app to the shared folder here. What you will use Express for is to create an api for your application to call. You can create a simple web api with a server.js file that can be started using

$ node server.js

In your Angular factories and services, you can make $http calls directly to your api.

Update

Currently working on a template to separate the back and front end of the middle app, this means that you can serve the same backend for you, the Android app, the ios app, and your web app.

His work continues, but feel free to check it for ideas or start your own separate MEAN stack of front and rear ends. 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 template for the structure of the application.

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

Your external application that runs in your browser uses HTML, JS and CSS (and frameworks such as angular), displaying data to the user and allowing them to interact with him. And a backend application that runs on your server (for example, in node or Spring or RubyOnRails ...), data storage, maintenance and calculation of business logic.

These two applications can be independently structured using the MVC pattern. However, this does not affect how they work together - they are completely independent and exchange data using the HTTP protocol (using AJAX on the interface). Therefore, for your external application, angular does not matter if the backend application is running on node or something else.

Just to explain the context int int:

Node is a backend framework, starting a server, maintaining business logic and communicating with a database. Express is a module for node that makes it easy to write an HTTP API to Node.

Ionic and angular - interface frames. They make it easier for you to create front-end applications.

Hope this helps a bit, this is a pretty serious topic, and it’s actually impossible to explain all of this in StackOverflow's answer.