i am creating a angular app and want to add few parameter before the hash in url dynamically without refreshing the page or controller.
eg: suppose initial url is
http://localhost:3000/#/xyz
i want to add parameter before the hash
http://localhost:3000/?sort=desc#/xyz
Note:
I can't implement pretty url concept of angular because i am not allowed to do any configuration at server side.
I tried HTML5 history but getting error like infinite digest cycle or controller reloads again and again
Related
I'm trying to hide a sensitive data from the url from a incoming href redirect. The problem arises when the url is manually changed from inside the angularjs controller, which leads to the page reloading.
Catch: I do not have control to add code to the application that has the href containing the url.
For eg:
external url redirect"www.sample.com/subpath?sensitiveNumber=123456789"
I expect the url to be changed to
"www.sample.com/subpath"
I did try to reference solutions from the following SO thread:
Can you change a path without reloading the controller in AngularJS?
problem at using reloadOnSearch is when another url comes with a different url data as parameters, it would not reload with the new data.
another method I tried was to store the incoming data into a localStorage of the browser, so that it is not necessary to know the sensitive data when the page reloads on url change; but that would result in all the Async functions to be recalled, impacting performance.
Here is the routing snippet of the current code
.when('/subpath') {
template: '<templatePath>',
controller: '<controllerName>',
reloadOnSearch: false
}
thanks in advance
change get request to post request.So that data is not sent in the url.
Thanks for the responses. The only way we had to overcome this issue is provide and encryption service in between the service layers and performed decryption in our application front-end. As of this date, we do not have a correct verified solution for this problem
I'm doing a quite large app that needs to save a Javascript object and save it to client's disk and viceversa: retrieve JSON object and parse it.
I've managed to save and upload the file, but here's the problem: When the file is successfully uploaded (checked from the console and inspector), Angular does not display anything at the ng-repeats, ng-model...
I assume the problem is that Angular does not know that the object has changed. I am wondering, since I seem not to find it anywhere: how can I re-render all of my Angular app?
What we did in one of our Angular projects, is some kind of 'cacheId'.
So imagine simple POST service generating random integer number.
Imagine another GET service returning that number.
Now in your Angular templates, wherever you specify template rul name, add 'cacheId' as param.
Instead oF that:
templateUrl: 'some-folder/some-template.tpl.html'
Do that:
templateUrl: 'some-folder/some-template.tpl.html?cachedId=' + someService.cacheId
What advantage?
You can click resetCache() url and generate different cacheId
client will get different cacheId in next request
browser will treat html template url as new url and will reload template
by reloading template you will get new data in
Something like that might work.
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'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.
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.