Fix Page Navigation problem in Angular Apps on Firefox OS
What’s cracking dudes? :D Ran in to a problem and found the solution to it. Thought of writing about it. So here we go.
Recently I created a small hybrid mobile app which I wanted to specifically for Firefox OS. I used ionic Framework which uses Angular.js to develop the app. And finally when I was done with the app I could run the app on android, iOS but not on Firefox OS. And I wanted it specifically for Firefox OS.. yeah right :P I tested the app on the Firefox OS Simulator the navigation did not work. Thought it was a problem with the Simulator and had one of my friends test in on a device. No good. Still did not work :’( So I started digging and found the solution.
The problem is this, I used ionic Framework to develop the app and I used ionic’s sidebar sample app as a base to develop my app. It uses templates and routing to load the templates when I navigate to different pages. In Firefox OS this navigation stopped working. The problem was that when angular generates the URL to load the templates it matches it with its whitelist. And in my case it does not match and it’s marked as unsafe.
So to remedy this we just need to do few simple steps.. You need to do some changes to the routing configuration. Go to your angular.module().config() function and you need to inset $compileProvider as a dependency. Then at the bottom of the function after the code for route configurations add this line of code
[code language=”javascript”]
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|app):/);
[/code]
So your code should look like this.
[code language=”javascript”]
.config(function ($stateProvider, $urlRouterProvider, $compileProvider) {
$stateProvider
.state(‘app’, {
url: “/app”,
abstract: true,
templateUrl: “templates/menu.html”,
controller: ‘AppCtrl’
})
.state(‘app.about’, {
url: “/about”,
views: {
‘menuContent’: {
templateUrl: “templates/about.html”
}
}
})
.state(‘app.details’, {
url: “/details”,
views: {
‘menuContent’: {
templateUrl: “templates/details.html”
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise(‘/app/home’);
// for Firefox OS only..
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|app):/);
});
[/code]
Then build the app for firefox os and and try running it on the Simulator. It should work like nothing happened
A word of caution :o
This should only be added for Firefox OS apps. For any other platform this line of code should be removed.
So there you go folks, That solves it and I’m a happy camper ;) Hope it helps if you ever ran it to this problem. Until next time keep rocking :D
