For my local angularJS development, I'm using nodeJS. If I deploy my angularJS project on a tomcat server, it basically works BUT, I'm using different pages and different controllers and every time I click on the other page, it seems that the whole application is restarted again, because the data in the rootscope is lost and it starts program parts which should be started on application startup only.
Can anybody tell me whats going wrong here?
Why is my application not 100 % correct running on tomcat?
I'm using tomcat 7.0.34
I'm not familiar with Tomcat, but we've had the same issue with Apache. As Angular needs to do the routing of your app itself, you have to tell your web server to always deliver your root HTML page, e.g. index.html.
After doing that, your app should work fine.
I assume when you say different page you literally mean a different html page (url).That is the expected behaviour. AngularJS is a Single Page Application (SPA) framework. Like any other SPA it gets reinitialized when you do a full page load\reload or you navigate to another page.
This is due to stateless nature of HTTP. Every page is an independent request, which starts the client side page life cycle.
For using AngularJS correctly as SPA, you need to have a main page. The content of this pages gets alter\appended by child views\partials (again pages). AngularJS also hijacks the browser url chnanges so that this does not cause full page reloads on url change.
Look at some sample applications created using AngularJS to understand how it works.
Related
I have a simple Angular 4 project served by Express. When I tried to fetch my site using Googlebot, it just showed a blank page (the innerHTML of AppRoot). I thought Google claimed its bots support Angular 4 / JS websites?
If this is still issue, is server side rendering using Angular Universal really the best solution? Like I have to set up another server that serves the server-side rendered app in addition to the main server that serves the normal client-side rendered app? And if it is, how do I tell googlebot to go to the port for the server-side rendered app and normal http traffic to go to the port for the client-side rendered app? Aren't crawlers http traffic?
The issue is not Angular4 specific. Any data generated dynamically by javascript will show first as blank, and then load its content. I assume you are looking at google page speed Insights.
To see what google see:
comment out your external css
comment out your external js
This will be google initial view. After that google will fetch the external files, run your javascript and render the page. Google page speed will penalize you for any changed pixels above the fold before and after fetching the external assets.
Angular Universal (or any server side rendering as this is not an angular issue) will solve that problem.
Hope that helps.
I'm not sure what I'm missing here, so hopefully someone can help me out. I'm working on a project where we're using Node and in the Run/Edit configurations I've down the following:
Node interpreter: This is the path to the node.exe file
which I checked out from Subversion
Working directory: this is where the "app.js" file is, this is the
path that from the command line you type node app.js and it starts the server
JavaScript file: app.js This is the name of the file that actually creates the server
Now from the main nav bar when I do Run / Run my server the box at the bottom pops up and tells me that Express server is listening on port 3000. Cool.
I can navigate to localhost:3000/myPage.html and I can get to the page just fine.
I added as JSON file to the same directory on my hard drive that myPage.html is in, and I can navigate to that as well by localhost:3000/largeTestData.json.
So the server is up and running and serving file as it should. My problem is that in my Webstorm project, I want to make an AJAX request to that largeTestData file. I do so using jQuery like:
var data = $.get('localhost:3000/largeTestData.json');
data.done(function(data){
console.log('here is your data');
cnosole.log(data);
})
When I do that I get the error (in Chrome)
XMLHttpRequest cannot load localhost:3000/largeTestData.json. Cross origin requests are only supported for HTTP.
and so I look at the URL and I'm seeing:
http://localhost:63342/
Obviously Webstorm has started the server correctly, but when I view an HTML file, it's not using that server (which, of course is why I'm getting the CORS error.
There's some fundamental stuff here which I'm obviously not getting. I need my IDE to deploy to the Web server that it started up, but it's not doing that. Please, someone give me a once over on all the technologies that I'm missing out on here.
WebStrom didn't start your node.js server, but serves static pages by its own internal HTTP server which doesn't know anything about node.js and Express.
The main problem:
When you start your node.js server, it's serving JSON files on port 3000. If you open an HTML-page with the little menu in WebStorm (where you can choose the browser), WebStorm opens the browser with an URL pointing to its own internal webserver running on a different port (e.g. 63342). JavaScript security prohibits loading data from a different host/port Same-origin policy.
It's not WebStorm's fault and you need a solution for this problem in production or you can't go live.
General Solution:
Either you have to ensure that HTML pages and JSON data come from the same host+port, or you can circumnavigate with (a) setting server-side headers ('Access-Control-Allow-Origin: *') as #lena suggested, or (b) using JSONP. Below you find some thoughts using nginx as a reverse proxy so from browser's point of view all requests go to the same host+proxy. It's a very common solution, but as mentioned above, there are other options.
Primitive solution:
Don't use WebStorm to open your browser. Load the page from http://localhost:3000/ and change the URL of the REST resource to $.get('/largeTestData.json'). You'll miss some comfort from your IDE, but you can immediately see that your program is working.
Comfortable solution:
As #lena suggested, there is a way to configure your Express/node.js as a server known to WebStorm. I haven't tried it, but I suppose you can then just press the Run-button and maybe the node.js plugin in WebStorm is as intelligent to know the static-maps in Express and know how to map an HTML-file to a web application URL and open the page in the browser with the URL served by your node.js application. (I'd be surprised once again if this really works magically, but maybe you can configure a mapping from files to URLs manually, I don't know.)
Dirty solution
With some options you can disable security checks, at least in Google Chrome. Then it's possible to load JSON data from a different port than your HTML page. I wouldn't recommend using these options (just my opinion).
Additional Hints
If you do more than just playing around with node.js and some UI fun and you have to serve your application "production-ready", then have a look at nginx to serve your static files and reverse proxy node.js requests from there. I'm using this setup even for development and it works like a charm.
Of course node.js / Express is able to serve static files as well, but IMO placing something like nginx in front of node.js (clustered) bring a bunch of advantages for production sites, e.g. load-balancing, ssl-offloading, avoid JSONP, in many cases performance, easier deployment updates, availability.
To get your code working, just change the URL in $.get() to full URL (including protocol):
var data = $.get('http://localhost:3000/phones.json');
In Webstorm 2016.3 (and probably earlier) there is now another option. Under the Configuration Settings for NodeJS runs, one can manually set the page and port to be loaded via Webstorm's "Browser/Live Edit" settings.
See the screenshot below for settings one can change.
I'm using CouchApp to push an existing html&javascript application. The application uses jquery and twitter bootstrap and it works perfectly fine from a regular web server / when opened locally.
(The application is basically a ready made app I bought and which I wish to redesign)
After I push the application (which is structured in many folders) I can't open it from couchdb since all the paths are "wrong".
My HTML files are under Page/PageType/Pagename.html so every css for example is accessed via ../../stylesheet/style.css but the URL can't be accessed when calling couchdb.
For example I have this page:
http://127.0.0.1:5984/coreadmin/_design/coreadmin/pages%2fother%2fsign_up.html
Which is displayed in the browser but without style/js/images because the path is:
http://127.0.0.1:5984/coreadmin/stylesheets/application.css (So _design/coreadmin is missing)
Is it possible to upload the project as is and make it work or do I have to go over all the files and fix the paths? (which means it will not work on any other web server...)
Thanks!
The problem was with the URL - by replacing the %2f to / everything everything is now working just fine.
I am working on MVC4 application. This is how my directory structure looks like:
App_Data
App_Start
Content
Controllers
Images
Models
node_modules
Scripts
Views
server.js //This is where my server script resides
Node.exe
This is how it all fits together:
Server.js is running on a server. User goes to a index.cshtml page and a connection to the server is created. If there are multiple users on the same page, they all can share data/thoughts etc. using "kind of" chat. each user's action is relayed to other connected users.
What i am wondering is how do i avoid someone directly pointing to my server.js file from the browser and view the content of it.
You appear to be running two separate web servers.
The first serves your MVC4 ASP files while the second serves your node.js application.
Placing the node.js files under the webroot of your ASP application makes them visible to browsers that visit your ASP application.
node.js is a web server in it's own right and does not require any other web server to operate.
I would move your node.js application outside of your ASP webroot. This will make its files inaccessible to browsers.
HI all! I am working on a JAVA/JSF app that runs within an iFrame. The client authenticates Outside of the iFrame, then redirects back to a page that contains the application inside of an iFrame. If the client has 3rd party cookies disabled, the iFrame will not be able to access the cookie, and it will never see the jsessionid.
What I would like to do is test for the cookie in the app, and if not found, redirect using JS to the current page, with ;jsessionid appended to the end. I tried that with
;jsessionid=#{session.getId()}
Which looked OK...but would never maintain the current session. I then added an
<h:form><h:commandButton/></h:form>
to the page, turned off cookies, viewed the page in a browser, and saw that the jsessionid listed on the form was different than the one provided by session.getId().
My question is this......how can I get the correct jsessionid, the one that would be part of the form?
Thanks! Mason
--Update--
I should mention that this is on the same domain, webserver, and application. an and the #{session.getId()} on the same page will return a different jsessionid at the same time.
Sessions are by default domain- and context bound. Your issue indicates that the page which the iframe is serving runs at a different domain and/or context.
If the page in the iframe runs at a different domain, then you'll have to write a "local" servlet which acts as a proxy with help of java.net.URLConnection or Apache HttpClient and let the iframe link to that instead.
If the page in the iframe runs at same domain but at a different context (and runs at same webserver), then you need to configure the server to share the same session among all running webapps. How to do that exactly depends on the server in question. If it's Tomcat or a clone/fork, then check the emptySessionPath attribute of the HTTP connector.