Develop Reference

How to prevent manual URL change from reloading the angularjs application?

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

How to add add query parameters without using #angular/router

I want to add query parameters to URL.
http://example.com/#/xyz?queryParams1=data&queryParams2=data
But don't want to navigate from one page to another. I go through angular docs but not able to get how to use it without using #angular/router . The idea behind it is just to track things via URL and not to navigate.
Any help would be appreciated.

You could use the Location from #angular/common
This will allow you do update the URL without navigating, for example:
let queryString = 'queryParams1=data&queryParams2=data';
this.location.replaceState('/xyz', queryString);

Handle legacy URL with Angular ui-router

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.

AngularJS - need access in index.html page to data from a service

I need to place code on every page of my app in index.html (Google Analytics tracking code). The issue is that some of the code needs to pull values from an Angular service. I'm wondering what the best practice is for doing this?
I was thinking to have run block that uses an injected service to get the value. I could then set a constant that I would have access to in index.html. I'm not sure if that's possible or not.
Any ideas? Thanks.

I'm not sure I understand exactly what you are trying to do, but it sounds like its as simple as retrieving a value from a service and binding it to a tag on your page.
In your controller:
$scope.yourConstant = yourInjectedService.getValue();
Then in your index.html:
<span>{{ yourConstant }}</span>
or:
<span ng-bind='yourConstant'></span>
IF I've misunderstood please try to clarify your scenario.

Using $sce in AngularJS

I'm having trouble getting my head around showing iFrames in my Angular app. My users are allowed to enter a YouTube URL and my app will convert this straight to a video.
Of course, Angular won't allow this directly so you have to explicitly "trust" the contents so I use this to get it to show the iframe:
$sce.trustAsResourceUrl(url_of_video)
However, how do I get back? I want to be able to send the URL to my back-end but in this sanitized form it's no longer the original url string.
UPDATE:
Experimenting with this and came up with this code:
angular.forEach($scope.task.items, function(item) {
item.data = $sce.getTrustedResourceUrl(item.data); //this gets rejected by $sce
item.data2 = $sce.getTrustedResourceUrl(item.data); //this is accepted and I'm free to POST the url
});
I've noticed that I can create a new name/value pair in the array and assign it the original url but if I try to assign the item.data with the trusted form of the sanitized data then it rejects it! Hmmmmm! Why is this?
Any ideas?
UPDATE 2
I decided to create two versions of the data, one for the front end (which I "trusted" with $sce) and one for the back. This appears to have solved my issue for the moment.

Take a look at this answers (which contains links to yet more answers and resources).
You should understand the implications of trusting content entered by a user and what $sce is there for.
If you want to allow YouTube URLs, it might be a better idea to "white-list" those URLs only (instead of trusting any URL entered by the user).
(Don't forget that SCE is not there to make your app bullet-proof, but it is a tool to help you make it safer and help you audit it easier/more reliably.)
That said, here is how you could configure Angular's SCE to allow URLs from www.youtube.com:
.config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self', // trust all resources from the same origin
'*://www.youtube.com/**' // trust all resources from `www.youtube.com`
]);
});
See, also, this short demo from the other answer (that does what you want).