How do you get a server-side redirect to go to a certain view in an angular app? I am guessing it has something to do with the redirect not triggering the part after the hash, but can this limitation be beat?
More info
I'm redirecting from an MVC controller to a page with an angular app. I'm using ui-router. The page containing the ui-view gets rendered, but processing stops there. If I refresh twice or go to the URL manually the page works as expected.
The MVC controller is called from a form which posts a file to the server and asynchronously populates a database and redirects when it's finished.
I don't see the problem, you can send a full url with hash and all on the location header and the browser will follow it, just check the response headers for this:
http://web-cf8f140d-22d3-4acd-b7a5-f9fa4e15e094.runnablecodesnippets.com/
What you can't do is getting the hash part directly from the request on the server side.
Related
I read that if i handled routing through server, when a client asks for a page resulting the server to render a new document which will also result to refresh the web page unlike frontend/angular routing.
No. It wouldn't be a single page application. If you route through backend, whenever you change a route, your entire application will be bootstrapped in the browser again losing the essence of angularJS
I'm thinking how to implement a SPA on Zend framework 2 using Reactjs? Haven't seen any tutorial that might help me. So, I was asking if this is possible. How would zf2 will handle the routes?
The routes are handled on the client side (by pushing URLs into browser's history so you can also use browser's back button for navigation)
Simply put, changing a route will not load a whole page from the server.
The server does not even know that your JS app is changing the URL in the browser (imagine you write by hand http://example.com#test while you were already on example.com; that #test thing is a fragment URL and it will never be sent to a server)
Instead, the JS application will respond to (once again, client-side) route changes by rendering a different page or section, and making some ajax calls to the server to fetch or update data.
Now let's see what the server should do:
send the first page (the "single-page") and the assets (CSS, JS) on
the first load
respond to app-originated AJAX API calls once the page is loaded and
the JS app has been started
That's why they call them "single page apps", because they do much of the logic and the presentation in the browser (DOM rendering, routes), and the server merely acts as a data layer, or a backend if you like this word better.
How to use $stateprovider without # in URL?
If we use $locationprovider.html5mode(true) then first time it was loading correctly but after refreshing the page the state is not loading and error is displaying.
I will explain you the scenario. We are using ASP.NET web api as back end server and front end is purely HTML application with angular.JS . we are not facing any issues with backend server. we don't have issues with api calls. I will explain with a example: www.test.com/#/main/home is redirecting to www.test.com/main/home using $state.go and rendering the view perfectly. But after redirecting to www.test.com/main/home if we refresh the page we are getting 404 error. Please help out
I am looking for to provide URL as per use choice. So I need to eliminate the # for that.
The problem with html5mode(true) and page reload is that in HTML 5 mode the browser sends the full URL to the server when a page reload is triggered. And if the resource of the full URL does not exist on the server, an error is returned.
So to fix your problem, you need to add a rule on the server to always send the same .html file no matter what URL is called.
The $stateprovider will then initialize the client side state accordingly.
You need to re-write the url with .htaccess
Check this link out:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
I am using angularjs routing. When I navigate to a view angular makes the request for the HTML defined in the templateUrl of the route. However, in a certain scenario - where the user's session has expired - the server returns a redirect. This redirect is followed and the resulting HTML is placed in the ng-view div.
This results in the login page being embedded within the original page which is no good. How can I make angular redirect the whole browser window to the redirect URL rather than just the contents of the ng-view?
I'am doing my first AngularJS project with ASP.NET Web API backend. What I am trying to do is, whenever a user visits www.mydomain.com, a login page (index.html) will displayed. After successfull login, he will be redirected to the dashboard.html (this is the shell page, partial views go here). My project structure is shown below-
I am confused about some issues:
Is this the best/common practices what i am trying to do in above?
As because dashboard.html is the main page, should i place app.js on dashboard.html?
If i put app.js on dashboard.html, will index.html (login page) have another app.js (i.e. loginApp.js)?
How should I manage the login state i.e. IsUserLoggedId, UserId etc in angular part?
This question may be silly. I googled, but did not find any example/article addressing such issue.
Would you please help?
Thank you in advance.
I am not sure how ASP.NET deals with it, but to my knowledge ASP.NET is just a server side framework whereas AngularJS is client side framework.
These two framework solve different problem, but has some overlapping features.
If you start using angularjs, then most of the time you will deal with the term "Single Page Application (SPA)".
There are different approaches in how you can handle the url redirection after login. I will just show you two example. There are many more how you can handle the user authentication and session.
First Approach:
In SPA, most of the time browser will change the url route and state directly in the page itself without making the entire page request from the server.
With that said, your dashboard.html will most likely be come a static template file which will be loaded from the browser directly. (i.e. the server does not dynamically parse the dashboard.html but only serve as a static file). Upon the user login, the angularjs will fire a asynchronous HTTP request into the ASP.NET authentication end point. A successful login may return a token to the browser, and the client will use it to manage the user session. At the same time, the Angular will have to change the route to /dashboard/. Notice that that the entire flow happens transparent to the user, it does not fire a full page HTTP request.
Second Approach:
Alternatively, if you choose to redirect from the server, you will have to send a HTTP Redirect 302. and since HTTP redirect will eventually call make a full HTTP request to /dashboard/, and it will then have to reload and bootstrap the angular app.js from the browser again. In this case, the user will have to wait for the dashboard page to be processed by the server upon login
Issues:
Is this the best/common practices what i am trying to do in above? there are many approaches, I think it is best to find the one that works for you. If you have a RESTful API, then you might want to have a look at the SPA approach in more detail.
As because dashboard.html is the main page, should i place app.js on dashboard.html? in SPA, you don't need to load app.js twice. but if you use the second approach, you have to reload the app.js again.
If i put app.js on dashboard.html, will index.html (login page) have another app.js (i.e. loginApp.js)? depends on your approach as stated above
How should I manage the login state i.e. IsUserLoggedId, UserId etc in angular part? Authentication Strategy, UNIX style authorization
There are more official guide that can help AngularJS Developer Guide.
Hope this helps you to integrate with the ASP.NET authentication mechanism.
you should have multiple shell pages. this link can help you...
refer to Multiple Shell Pages part.