I am trying to open an application client side and I have developed this entire application using only angularjs as a front end. It seems to be hijacking the routing and disallowing this.
In old javascript I used to be able to do
var wnd = window.open("dynamicsnav://arbitraryLinkDetails", "_blank");
wnd.close(); // this opens the protocol to start the application client
// side and closes the extra browser window
to open the Nav application client side and the details of what to open in place of arbitraryLinkDetails.
Now when I do this inside of my angular app it appends localhost to the url(really it is the base domain it attaches) like this
"http://localhost/"dynamicsnav://arbitraryLinkDetails""
which does not work.
Things I have tried
appending "//" to the url to break out of the angularjs routing, this tacks on a %22 to the beginning and removed the : for the protocol like "%22dynamicsnav//arbitraryLinkDetails"
I have tried modifying the routing so
var redirectFunction(){
return theUrl; //this gets the full url of dynamicsnav://arbitraryLinkDetails
}
$routeProvider
.when('/NavUrl', {redirectTo: redirectFunction})
and that again appended base url to it.
This is a requirement for my current project and I simply cannot figure out a way to open this like I used to with angularjs.
I verified the url's I am testing with work in another application not using angular. Thanks for any help!
The AngularJS $routeProvider service manage routes that deep link controllers with views, wich is not your case, why don't you try this :
var redirectFunction(){
window.open("dynamicsnav://arbitraryLinkDetails", "_blank");
}
$routeProvider
.when('/NavUrl', {redirectTo: redirectFunction})
Related
I am building a simple MVP of an idea in jQuery and Rails 5. I would like to avoid introducing a front end framework for the purposes of the simple project.
In order to let users navigate with the forward/back button I made different templates with "routes" such as /profile and /network as follows.
I use popstate to change which handlebars template I render (in the onPopState function):
window.addEventListener('popstate', onPopState, true);
I use pushState when I navigate to a new page (I navigate just by swapping which handlebars template and event handlers I am showing):
history.pushState({page: 'home'}, 'Page Title | Home', app.client + '/home');
I have most of the functionality working. The only problem is that if I refresh the page or type in a URL like myapp.com/profile in the address bar directly I get logged out and/or see an error, either a 404 if the app is deployed, or a Cannot GET /profile if I am running on localhost.
I think the issue is that I need to implement some kind of routing on the front end, but I am not sure how / which to use. Are there simple ways to implement this with just jQuery / JavaScript?
Thanks!
Recently I have developed a website http://www.skduhariya.com, this is completely based on angularJS. I'm using the concept of ui-router for routing between the static pages. Symbol(#) is being displayed in the URL like skduhariya.com/#/blogs
I tried using $locationProvider to remove Symbol(#) from the URL so URL becomes like skduhariya.com/blogs,
its working fine, But, when we refresh the browser is not working as expected. Its display 404-Page Not found.
code:
function routeConfig($stateProvider, $locationProvider) {
$stateProvider.state('public', {
abstract: true,
templateUrl: 'src/public/public.html'
});
$locationProvider.html5Mode(true);
}
can anyone help me out to fix this.
You may could watch here
As he is already describing:
Server side
Using this mode requires URL rewriting on server side,
basically you have to rewrite all your links to entry point of your
application (e.g. index.html)
:)
For a Django 1.8 app with Angular.js & Django Rest Framework I'm using CherryPy server to serve the app over WSGI.
For this purpose I'm basically reusing this code, which works fine, until I use the following angular.js command in one of my *.js files:
url = patientDetailView + response.data.id + '/';
$window.location.href=url;
The view this link is pointing to requires (like other views as well) the user to be logged in(authenticated). However, although the user has been already logged in after $window.location.href=url django redirects to the login screen where the user needs to log-in again! My guess is that this may be due to the session being terminated (?). I don't see this problem while running the django dev server (./manage.py runserver)
Anybody can point me to why this is happening and how to fix that? I'm running out of ideas...
Normally with JavaScript you can use the following to manipulate the history, but it does not work.
Example: What I want to achieve is to go to /clients/:id and then when I go back, I want to go to /blog/, doesn't matter which page i was on before.
$scope.changeView = function(clientId){
history.pushState({}, null, '/#/blog');
$location.path('/client/' + clientId);
};
However, this does not work in Angular.
Any idea how this could be solved?
As I am confused about what your question is.. (Are you just trying to find an Angular way of manipulating the history? Or are you trying to redirect?)
Something that may be of interest to you is the $location service on AngularJS.
I just used history.pushState(), null, '/aboutus') while on a page within my app, clicked a link, then went back and it seemed to load that '/aboutus' link just fine, so long as your Angular app is configured to route that path somewhere.
Chrome Packaged Apps have a rather strict Content Security Policy. One result of this is that manipulating the location (like clicking on a link) results in:
'Can't open same-window link to "chrome-extension://lkjasdfjklbdskjasdfjkhfdshjksad/derp.html"; try target="_blank". '
Target _blank will open the link in chrome which is not what I want. Can AngularJS' routing work in such a locked-down environment?
They docs give an example of an Angular app, but conspicuously does not use routing.
Update
Here is the link that, when clicked, gives the error: <a class='walrus-link' ng-href='paystubs/{{walrus.id}}'>Walrus {{id}}!</a>
Instead of using an href, try using ng-click and call a method to your controller the relocates to the appropriate page using $location. See the documentation on the AngularJS site. The following quote from the doc gives an indication that the $location service might be appropriate for you:
When should I use $location? Any time your application needs to react
to a change in the current URL or if you want to change the current
URL in the browser.
Your code might look something like this:
<a class='walrus-link' ng-click='getPaystub(walrus.id)'>Walrus {{id}}!</a>
and in your parent controller, you'll need a scope method called 'getPaystub' with a line similar to:
$scope.getPaystub = function(selectedWalrusId) {
$location.path('paystubs/'+$scope.walrus.id);
}
This way angular keeps control and won't cause a page refresh. This hopefully keeps you within the bounds of the CSP. Unfortunately I cannot test this in a packaged app, but I've used the exact same convention in a web app and it works just dandy.
routing works for me in my chrome app when not using $routeProvider's html5 mode (which is disabled by default), you just have to use a hash in the url.
so my links look like this:
About
$routeProvider configuration is as follows:
$routeProvider.when('/about', {templateUrl:'about.html'})