Node angular 2 integration - node.js

Hi I have a node based server api, and have created a simple web app using angular 2.But I don't understand how to integrate both. I have done a little research but most of the websites are only offering how to built angular 2 application and no one offers node integration.

Notice that Nodejs is simple server-side Javascript, so you have to follow one of these approches:
Server side web app:
In this case all pages (and functionality) will render in server-side. You can find lots of framework for doing that. So you need no client-side framework like angularjs.
Client side web app + server side api: I think that is something you need. Server side api has build as rest api service and serves all your business functionality. In client-side angular just consumes these services. All client based functionally will handle with angularjs (like routing, async service call, manages states and etc)
Or if your question is how comminucate with node-js rest api look at this page: angular2 http

You can install any web server for angular like apache or nginx. For example u're using apache, when you run apache you can access angular web through http://localhost/project.
Follow this tutorial on how to install and run nodejs http://blog.modulus.io/absolute-beginners-guide-to-nodejs on window. On mac https://shapeshed.com/setting-up-nodejs-and-npm-on-mac-osx/
You can call node server using REST API.
In your angular service for example :
$http.get('http://project/rest/getData', succFn).then(function (res) {
return succFn(res.data);
}, 'error');
In nodejs (REST Server) :
apiRoutes.get('/getData', function (req, res) {
// Return any data to client
res.json({
'code': '00',
'content': 'Return dummy or json here',
'remarks': 'Success'
});
}

Related

How do Node.js and Angular connect together?

I manage to create Angular apps in general, but I do not understand how Angular and Node.js connect together.
Even on a local environment, you need to launch two things:
ng serve
node app.js
So how the two connect? Do you render the Angular app via Node.js? Do you render the app like this:
or like this:
But then there is the route problem, do you define routes via Node.js with app.get('/')
or via Angular with:
const routes: Routes = [
{ path: '', component: HomeComponent}
];
ng serve & node app.js will launch those two scripts at the same time.
Angular and NodeJS application connect over HTTP where NodeJS is the backend and the Angular is the frontend.
ng serve is the command to server Angular application on your local environment but when you'll deploy your Angular app in production, first you'll have to build the Angular app and serve the destination folder using Nginx or something else..
node app.js is the command you are using to launch your NodeJS server (in your case) which will start listen on some HTTP port (if you are using NodeJS Express correctly)
An example of connection between the two over HTTP is like this:
the Angular app issue an HTTP request to the NodeJS backend and the NodeJS server respond to that HTTP request to send data back to the Angular app.
regarding the routing, Angular is a Single Page Application (SPA) so it can handle it own routing requests as you showed and this is what you should use for your website (the frontend) most of the times. where the routes in your NodeJS application refer to your REST API routes, as in what functions your NodeJS server supports.
I think you should read on how to implement REST api in NodeJS and you'll find great detailed guides about it, and creating a single page application in Angular

How to connect NodeJS with ReactJS front-end

I am new to reactJS. I am working on project which uses following :
Front-end : ReactJS
Backend : NodeJS (Express)
Front-end runs on port 3000
Back-end runs on port 8088.
I am planning to deploy application on amazon AWS.
What i am trying to do is load reactJS front-end when i make request on http://localhost:8088/
I know using axios we can make request on backend server and display fetched data.
What would be standard way of loading ReactJS front from the nodeJS ?
I'm not sure if this is the answer you are looking for, but generally in development you use something called proxy in your package.json in the client (react) folder:
{
// Other stuff
"proxy": "http://localhost:8088"
}
and then when you'd want to deploy you'd run npm build for your react folder and serve that generated folder called build. But as I said, you usually do that only when deploying your application onto server, not the actual development.
Also I'd suggest checking some of these videos, that are focused on deployment, because that is what I think you are asking, right ?

Use Express Project With Apache Cordova

I am trying to figure out how I can convert an existing express.js app into a mobile app using Apache Cordova. Currently, I can go into the root directory of my express app and run "node index.js", then I can view the current WebSite at http://localhost. So what I want to do is convert that WebSite into an app I can run on a mobile android device or ios. I have read many tutorials on using Apache Cordova, but none of them seem to work with express.
Express, runs a server in the back end. It does not automatically translate to Cordova which is a front end platform. You would need to call your express server from Cordova using AJAX (JQuery, xhr, AngularJS, etc...) and, then, render the website using Cordova.
AJAX Call with JQuery:
$.ajax({
type: "GET",
url: `http://localhost/your/path/goes/here`,
success: function (data) {
// render html and/or data
}, error: function (err) {
// throw error (or do something with it)
}
});
Also, not trying to be harsh, but anything you put on: http://localhost, cannot be accessed by people who are not on your computer (unless you give them your ip address and are running the website), please post any relevant code and/or error messages in the future so others can help you.
Relevant links which expound upon my answer:
Cordova and express js?
How to convert node.js application into cordova
You can refer to here: https://github.com/maximegris/express-cordova-sample for an example (not my GitHub)
If you want to run express from your phone (making your phone a server):
https://www.sitepoint.com/how-to-run-node-js-with-express-on-mobile-devices/

NodeJS express rest API APP into angular 5 project

I am new in programmation and i follow a tutorial in udemy to create my restful API with express JS.
I have almost finished my API and i want to integrate it in a new angular 5/6 project.
I have tried a lot of tutorials but i cannot launch my express project in an angular project to make a request with postman.
could you show me please ?
Here is my express project
You don't really need to "integrate" your NodeJs app with an Angular application.
You make a NodeJS REST API as you would with any other technology and run it separately on a certain port (Default is 3000 for NodeJS)
Run it with the command node app.js.
Then you make an Angular application, that connects to your API as if it would to any other page. A HTTP call inside a service to your specified link.
public contactAPI(){
var uri = 'localhost:3000'; //Or whatever the link is for your node server
return this.http.get(uri);
}

How should I run a REST API with Meteor?

I need the Meteor server to handle a very simple POST request not coming from the application client. With Express, I'd just do something like app.post('/something', function....
Is there an equivalent in Meteor? If not, how should I set this up, startup an Express server in a is_server context?
Meteor does not yet have the built in functionality to provide a restful API.
You can build basic routing into our application using Backbone, as in the Meteor example provided here: http://meteor.com/examples/todos
You can do something like this:
var AppRouter = Backbone.Router.extend({
routes: {
"": "dashboard",
"home": "dashboard",
"profile": "profile",
},
profile: function () {
Session.set("current_view", "profile")
this.navigate('profile', {trigger: true});
},
Also take a look at: How to expose a RESTful Web Service using Meteor
Alternatively you can serve RESTful APIs with Meteor using the meteor-collectionapi Atmosphere package. See also Is Meteor an option, if i need an additional REST API?.

Resources