I'm building a website where the account page is an Angular.js single page app. So a normal view would have the URL like localhost:3000/account#/info
Now say I have to make Angular handle a URL like localhost:3000/account/?param=value, how should I set up the router? (I'm using ui-router)
I tried something like
$stateProvider.state('my-page', {
url: '',
controller: 'MyPageController'
})
but it doesn't work. (It only detects localhost:3000/account?param=value notice the missing forward slash after account)
Does anyone have any ideas? Thanks.
Because the query part belongs to the server side URL instead of ui-router side, you'll need to get it using $window.location.search.
Then you can refer here to turn it into an object for further use.
Related
In previous versions of angular, or other SPA frameworks, navigations used to use "#" in the URL to move from a page to another without make another request to the server.
Today, using Angular 4 routes, I notice that the URL was rewritten without any request to the server. for instance domain.com/about. It seems very strange to me.
If my SPA is served from a domain.com/index.html, a request to domain.com/about should have a side effect bring a totally diferente page (for instance about/index.hmtl), not a route inside the index.html.
Change URL without redirect to the address in the URL seems to violate something.. dont?
How Is that possible in Angular 4 using only client side?
While you navigate on site, click links, tabs etc. - this all is just client side.
However, when you press F5 or navigate to link like /school/6/personList - server should be configured to return index.html.
Thats why quite often rest api is smth like /api/users, /api/emails, etc. so all start with '/api' - and you may easily redirect all other requests to index.html.
Change URL without redirect to the address in the URL seems to violate
something.. dont?
No, that's the point of Single Page Applications (SPA) as opposed to the other way where a request is sent to the server for each URL change.
Angular router has two location strategies:
HashLocationStrategy
PathLocationStrategy
navigations used to use "#" in the URL to move from a page to another
without make another request to the server.
It's still possible now with Angular by using HashLocationStrategy, to do that just use {useHash: true} do the following:
#NgModule({
imports: [
RouterModule.forRoot(appRoutes, {useHash: true})
],
Today, using Angular 4 routes, I notice that the URL was rewritten
without any request to the server
That's because the PathLocationStrategy is used by default.
Regardless of the strategy, if you're using Angular routing, all URL changes from the application will be handled by the router and no requests will be sent to the server. For example, the following code:
Router.navigateByUrl('/my')
in the case of PathLocationStrategy will generate the following URL:
host/my
and in the case of HashLocationStrategy it will generated ULR like this:
host#my
I am integrating keycloak.js file with my application. My application URL is http://localhost:8083/#!/
Because of the # in the URL it was not working. So I used $locationProvider.html5Mode(true); to remove # from the URL, and now Keycloak integration is working.
But now the browser is making a server call when refreshing my URL (for example, to http://localhost:8083/page1) after removing the #.
Can any help me to solve the refresh problem?
when you use html5mode, you need also server side rewrite as written in angular documentation (https://docs.angularjs.org/guide/$location), paragraph Server Side.
So if you are able to rewrite URL on the server to root of your application, it will work.
BUT
You might get into trouble as I did on EAP 6.4.
If you would want to access some context other than your root, for example
/root/some/angular/context
and you weren't logged in, than the rewrite would strip the context and the login fails on missing OAuth_Token_Request_State.
The problem is, that the KeycloakAuthenticatorValve is called after the RewriteValve, which strips the context. If Keycloak would have been called in reverse order, it would all work perfectly. I checked the KeycloakAdapterConfigDeploymentProcessor, which is responsible for adding the valve, and it adds the valve at the end of the list instead at the beginning of the list.
To fix this I had to create custom DeploymentProcessor, which ads the RewriteValve after the KeycloakAuthenticatorValve instead of having the valve registered in jboss-web.xml descriptor.
I am trying to replace an existing application with a new angularjs application. In existing application user comes to a specific landing page from external app through a specific url something like
'localhost:8080/APP_NAME/recordPage?recordId=ABC123'.
I am trying to implement new app using angularjs. I managed to build app to access
'localhost:8080/APP_NAME/#/recordPage?recordId=ABC123'
using angular routing mechanism. But is it possible to make url available exactly as it was before with out '#/'?.
In spring framework i can define it in controller to return to landing page directly, but is it even possible in angularjs to directly access specific page without going home page or index page?
localhost:8080/APP_NAME this is your context path and in angularJs '#' differ context path with specific accessing path.
So when ever you want to access another page it simply change the path after #, so it is easy to set state with particular url.
& if you don't want to go through '#' then don't declare your file path in index page and access it from outside.
This is resolved by creating a separate servlet to handle direct access using servlet annotations
'#WebServlet("/recordPage")'
I need to access the URL http://{myapp}/product/car/new, but I'm getting only the template for state car.new.....
I want to load the entire app and the car.new too
Ps.: It's like copying a URL a link of angular docs: https://docs.angularjs.org/api/ng/function/angular.injector for example.
You should take a look to $location, it will let you get the full url or the params, but it will be wiser for you to show us your code, because we cant know if you already tried this alternative
I'm handling routing using ASP.NET MVC (using RouteCollection class). But my front end is written in angular and at some places I want to change url using Angular's $location and I want it to support HTML5, so I added this line to my module.config :
$locationProvider.html5Mode(true);
But since then it seems that my routing has been handled by Angular.
For example my SPA is on mysite.com/user and there I want to change url using Angular's $location (so when for example users click tab url changes to mysite.com/user/tab without reloading).
But when user navigates from that page to any other (for example mysite.com/other) I want that handled by ASP.NET MVC's routing.
What now is happening is that my url changes to mysite.com/other but website doesn't navigate to that page, i.e. MVC routing doesn't handle change.
EDIT
I don't have any routes defined in Angular, all my routes are defined on server side and server side routing just stooped working after I added $locationProvider.html5Mode(true);
No unfortunately not. If your angular SPA is hosted at foo.com with HTML 5 mode on, foo.com/spaRoute1 will hit your ASP.Net server and expect to find that route (likely controller=SpaRoute1 action=Index).
You will need to set your default route to always resolve to the controller/action that is responsible for serving up your SPA. All while defining any other routes that you need which are not specific to your SPA.
I don't know so much about ASP.Net. but the same problem I solved with node js like this.
I solved the same problem with push API enable to the server. Basically angular render the page at client side and find the exact route by #. you can enable html5 mode to remove #.
$locationProvider.html5Mode({
enabled:true,
requireBase: false
});
Remember don't forget to enable push API support at server side. just by adding
//To suport push API
// Just for DEMO in your case it may be different
app.use('/admin/*', function(req,res){
var user = req.session.user;
res.render("adminView",{user:user});
});
Here when you hard refresh or enter direct url into browser without # tag. server will render the home page(index) page and load your all required file. after that angular will handle all the routing for you because you have enabled html5 mode so no more need to add # in url.