In a Chrome extension I can do:
chrome.tabs.create({ url: 'chrome://extensions/?options=' + chrome.runtime.id });
Is there some similar action that I can do in a Firefox WebExtensions add-on to navigate to the options screen for my add-on?
Use the runtime.openOptionsPage() function after defining the options page in the manifest. It will return a promise for the creation of the options page.
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/openOptionsPage
Related
I always use html5Mode true when using angular ui-router but for a project hosted on github pages, I can't activate this mode given that no server side redirection is possible. So lets go with uggly hashbangs # in URL ;)
My state
.state('app.root.elus', {
url : 'élus',
Displays in Chromium Browser URL bar :
/#/%C3%A9lus
But if I activate html5Mode, the URL displays correctly
/#/élus
In Firefox, in both modes, accents are correctly displayed ...
Would anybody have a beginning of explanation and solution ?
My application is with spring + angularJS and after authentication from controller i am not able to redirect to home page.
console.log("id:"+employee.id);
alert("Trying to redirect to home page");
$location.path("/home/"+employee.id);
When this gets executed http://localhost:9393/login#/home/21 is being redirected in the url but i want http://localhost:9393/home/21 (without /login#)
This is happening because $location is using Hashbang URL, you can change this by enabling Html5Mode .
enter image description here
So include this in .config method of your module.
locationProvider.html5Mode(true);
For more details look here AngularJS Guide for $location
The hash is because of the hashbang mode. you will have to configure html5 mode. This tutorial explains how to enable html5mode (pretty url)
HTML 5 Mode- angularJs
For more details look here AngularJS Guide for $location
I'm using $routeProvider and $locationProvider to handle pushstate URLS in a single page app (SPA), something like this:
angular.module('pets', [])
.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/pet/:petId', {
controller: 'petController'
});
})
.controller('petController', function($scope, petService, $routeParams){
petService.get('/api/pets/' + $routeParams.petId).success(function(data) {
$scope.pet = data;
});
});
The URL is used to pull content from the server which may or may not exist.
If this was an ordinary multipage website, a request for missing content would trigger a 404 header response from the server, and a request for moved content would trigger a 301. This would alert Google to the missing or moved content.
Say for example I hit a URL like this:
http://example.com/pet/123456
and say there is no such pet in the database, how can my SPA return a 404 on that content.
Failing this, is there some other way to correctly alert the user or search engine that the requested URL doesn't exist? Is there some other solution I'm not considering?
The real question is does http://example.com/pet/123456 return anything at all?
If your starting point is http://example.com/ and there's a link to http://example.com/pet/123456 then Angular will call the petController which in turn makes an AJAX call to http://example.com/api/pet/123456.
A crawler wouldn't do that but instead would try to call http://example.com/pet/123456 directly.
So your server must be able to handle that call. If there is no pet with the id 123456 then it should return 404. Problem solved. If there is then it should return the SPA. The application should then handle the situation accordingly.
According to this answer How do search engines deal with AngularJS applications?, You should use Headless Browser to process crawlers requests, and serve back snapshots of the page with the appropriate Response Code. https://developers.google.com/webmasters/ajax-crawling/docs/html-snapshot
The google example did not include 301,302 or 404 cases. However, their code could be modified to analyze the content of the snapshot and change the response code.
I found prerender.io offers this service, but it is not free. However, they have a free plan if you have fewer than 250 pages. Prerender asks that in case of 404 or 301, you add a meta tag to the DOM.
<meta name="prerender-status-code" content="404">
this meta tag is then detected by their headless browser and the response code is changed.
Try this
angular.module('pets', [])
.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/pet/:petId', {
controller: 'petController'
}). otherwise({ yourUrl:'/404.html'}) // Render 404 view;
})
I have angular app working well under /app#/index and another page on /newapp#/about
So my question is is there anyway, i can switch from url1 to url2?
Because I have different layouts for /app and /newapp
I know that i can use $location.path to change view, but that will change it to
/app#/index => /app#/about, which I don't want.
Any Ideas?
$location is only useful for observing the current location, and changing it to paths the app can route to. If you need to navigate the user to a location outside of the app, you'll need to $window.location.href = '/newapp#/about'.
If you are providing links via <a>, you should be alright. There are three scenarios (See "Html Link Rewriting") where AngularJS will let the browser navigate to the new URL normally:
There is a target attribute: Refresh /app
There is an absolute URI in href to another domain: Redirect to google
The absolute path (one beginning with /) has a different base than the current app: Redirect to /newapp
I'm having trouble getting path lookup to work with a AngularJS v1.2.0 and PhoneGap/Cordova Android application. I've come pretty far with html5mode(true) by setting <base href="."/> in index.html and then changing $routeProvider.when('/') to $routeProvider.when('/android_asset/www/index.html'). After that I am able to get redirectTo('login') to reach $routeProvider.when('/login') and there render templateUrl: 'static/partials/login.html' as expected.
The problem I have is that if I instead try to redirect to the login page from my Javascript code with $location.path('/login');, the route is found but templateUrl loading fails with an insecurl exception.
I've tried whitelisting access to file:// by using the new angular-sanitize module, but that does not help.
How can I make $location.path() do the same things as redirectTo so that the partial is loaded? Or is there some other way to solve this problem?
UPDATE: I got a bit forward by adding a call to replace() after the path function, e.g.:
$location.path('/login').replace();
but that seems like a hack, and it still causes the templateUrl in the otherwise route to fail with the same exception.
Any ideas on what might be wrong? Is it that html5mode(true) just does not work at this moment with Phonegap and the only way to fix this is to set it to false and add hashtags to every path (like is done in the angular phonegap seed project)?
For future reference, this is how I managed to solve the problem:
AngularJS currently does not seem to support html5mode(true) inside a Cordova application because of the insecurl problem I reported. What I had to do is add
var h5m = (typeof html5Mode !== 'undefined') ? html5Mode : true;
$locationProvider.html5Mode(h5m);
which gives me the possibility to explicitly set html5Mode in the PhoneGap index.html with a global variable:
<script>
var html5Mode = false;
</script>
So now $location.path('/login') as well as redirectTo: 'login' works, but links in html files, don't. To get those working in PhoneGap, with html5Mode disabled, I had to add #/ in front of every link, e.g. login.
That makes PhoneGap work, but breaks the web page which uses History API with html5Mode(true). The last piece of the puzzle was to add <base href="/"/> to the web page's index.html (and leave it out of the index.html of the PhoneGap project.) So now even though I have a link that says #/login in the web page, I get to the url http://example.com/login and don't see any hashes in the address bar.
**
So in the end I have History API working in my web page and History API disabled in the PhoneGap project (where there really is no need for History API as there is no address bar). The only downside is the extra #/ I have to put in each template html file, but that is a minor annoyance compared to the ability to use all of the same html and javascript files for both web and mobile.
I had this same problem as well. I managed to fix it by skipping the leading slash in the route config:
$routeProvider
// route for the foo page
.when('/foo', {
templateUrl: 'foo.html', //previously: '/foo.html'
controller: 'fooController'
}) //etc.