Do i need to host my angular app with a node server - angularjs

Do i need to host my angular application on a node server for it to work?
I have been doing local development and am trying to integrate ui.router into my application but it does not seem to work because of the root/file/file/index.html file directory when running in the browser. Is that what is causing it or is it that I need to utilize these tools with a NodeJS server for them to cooperate.
Here is what I am doing with the ui.router
var app = angular.module("myapp",[
'ui.router'
]).config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('login',{
url:'/login',
templateUrl:'views/login.html'
});
Solved the problem by just running the application on my server which resolved the ui.router problem.

You will need a server to run your Angular app, not necessarily a node server.
From https://docs.angularjs.org/tutorial/ :
While Angular applications are purely client-side code, and it is possible to open them in a web browser directly from the file system, it is better to serve them from a HTTP web server. In particular, for security reasons, most modern browsers will not allow JavaScript to make server requests if the page is loaded directly from the file system.

Related

How to access a database from a hybrid app without crossing domains?

I am developing an app with PhoneGap (Cordova) + Framework7 and I need to connect to a database. The issue is that it's an hybrid app, which means the www files are local and the app creates an internal server, and so if you try to use AJAX to run a php file it crosses domains, since it'll try to reach for my webserver while it's running it's own server. What can I do?
(I know Cordova has a utility named WebSQL that connects to SQLite, but my database is MySQL, and I think it can only connect to a local db)
(You can't move php to be local because Cordova can't run php files, also it's probably not very secure)
My suggestion is to use Ajax to access your server. (to run the PHP file) You can allow your server URL in environment variables of frontend.
Check for Content-Security-Policy and connect-src in frontend and add your server URL there. Then you will be able to send Ajax to your server.
Hope this helps.

Integrate TomCat and Node server

I have an existing JSP, Anuglar 1 application deployed on TomCat server during development. I would like to migrate JSP pages to Anuglar 2+ one by one.
I am using Node / NPM for Angular 2+ migrated pages. Is it possible to set proxy in TomCat server such that whenever an angular 2+ page is requested, it would redirect the user to Node server to serve Angular 2+ pages?
I understand Angular 2+ page can be directly copied to TomCat server but it would require additional compilation step to convert them to static JS pages. I would like to serve them directly from Node server for faster development.
For one, you really shouldn't serve angular pages dynamically. Even if you do serve them from node, serve compiled static pages instead of ng serve - for security, performance and other reasons.
With that said, sure you can do this. This depends a little on your setup, but what it comes down to is that you need to proxy all the angular pages to node server. This has not a lot to do with Angular itself.
So, the easiest way to do this is to tell Apache (or nginx or whoever is in front of your Tomcat) to proxy all 404s to the node server. Then node will render angular site, and this in turn will match the url and render the given page, or if not found, render it's own version of 404.
Alternatively, give your apache or whatever, a specific list of URLs (that are already ported) to pass through to node server.
If you don't use Apache, but are serving things out of Tomcat directly (you shouldn't), you can use something like this.
Tomcat itself does not have a reverse proxy built into it. However, you can accomplish what you're asking if you implement the proxying in your application (i.e. as a servlet or filter).
To do this you could use existing software, like Netflix Zuul or if you're using Spring then Spring Cloud Netflix. Zuul has a lot more features than just a reverse proxy, but it something that would work for both production and development.
The Tomcat Wiki has more options, and I'm sure you can turn up even more by searching for something like "reverse proxy servlet". Just be careful if this is something you're going to put in production, and test both performance and security of the solution you end up using.
You could also put a traditional reverse proxy like Apache HTTPD or Nginx in front of Tomcat & your node server, but that's one more thing to run on your developer machine.
Hope that helps!

Debug AngularJS and NodeJS in Webstorm At Once (Without CORS)

I have a client/server app running on NodeJS with an AngularJS frontend. I want to use the built in debugging features of Webstorm, but it just won't work.
Imagine following scenario:
I have a webstorm project with a client folder and a server folder. I can start the debuggers for the client and the server, and it works. But both sessions are on different ports. So an AJAX request to the server inside the client doesn't work without using CORS and telling AngularJS to use a different server address.
In the production version the client will be published under the server, but for developing there is no need to do this.
Does anyone know how achieve this? Something like: The system should behave like one server, under one URL.
Or is my approach stupid?
Best regards,
Kersten

Cloud 9, Angular and Express

I've an angularjs project with an express 4 backend, both hosted in one cloud9-ide workspace. The node backend is running under process.env.IP (0.0.0.0) and process.env.PORT (8080). The Angular Project is living under a 'client' subfolder needs access to the backend within the workspace. The Angular App needs it's own port - right? How can I accomplish this task?
Thank you for helping me out, Günther
I'm not entirely sure what an 'angular project' means. From what I know from Angular it is more common to run Angular code on the client. This is probably why it is in a folder called 'client'.
If this is the case then express will serve the angular files to the client over the port specified. Angular will run in the browser and do all it's magic there.
If this is the case the answer to your question would be that you don't need another port and all should work as you've set it up.
Do note that Cloud9 only supports 1 port that is accessible from the outside. For most express + angular apps this is all you need.

Why we need web server to run Extjs4 projects?

As Extjs4 is made with .js files then Why we need web server to run extjs4 project ? I read in sencha documentation that....
"You must need: A web server running locally on your computer, for example, XAMPP (Recommended)".
Can we run extjs4 project on a local machine without installing web server (XAMPP/ Apache)? If so please tell me how?
Thanks in advance.
Web-server needs for process http-request (listening 80 port), as is: get data(JSON/XML), refresh parts of pages and etc.
If you open index.html in browser (without web server), you need using packager (sencha command) or include the whole framework js and all your project files into your index.html, either in form of a bunch of script tags or concatenated into a single file.
Otherwise, the Loader is using XHR requests that can only be completed through a web server (security issue - imagine loading client's system files though Ajax)
A Webserver is required only if you are using components which require dynamic data e.g. Grid Panel showing stock quotes. As stock quotes keep on changing, you will require a server to send the data.
You will not required webserver, if you are using static data. See DataStore Component for more details.
Web server is not required to run any extjs code because javascript runs in browser engine and extjs is purely javascript framework. But when we think of developing an application which should be dynamic in nature(most of the apps)deployed on server so that server request/response can be handled. And in most of the cases we write business logics in server which returns some dynamic data that can be shown in UI through extjs.

Resources