trying to set the correct base href value for an angularjs html5 web app to work in cordova
initially using $locationProvider.html5Mode(true) with <base href="/">:
app works perfectly in a normal browser
cordova gives resource errors for css / js / templates etc
(I believe it looks for resources within the cordova root directory rather than the platform root?)
Tried a few alternatives are floated around here on SO and ui-router FAQs:
<base href="."> with html5 mode as per this answer :
assets are found ok in cordova (no resource errors)
ui-router goes into a tail-spin with infinite loop and the following error message
Error: Failed to execute 'pushState' on 'History': A history state object with URL 'https://page/' cannot be created in a document with origin https://example.com
<base href="./"> with html5 mode:
assets found in cordova (no resource errors)
gives me the dreaded Error: 10 $digest() iterations reached. Aborting! message
tried using frankwallis solution mentioned here but that didn't help (same error)
no base href with $locationProvider.html5Mode({enabled: true, requireBase: false});
assets found in cordova (no resource errors)
pages start loading inside themselves ?? ...like angular bootstraps twice in some states ?
my app config definition looks like:
myApp.config(['$locationProvider', '$urlRouterProvider', '$stateProvider', '$stickyStateProvider', function($locationProvider, $urlRouterProvider, $stateProvider, $stickyStateProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('root', { // we define a 'root' state so that we can load some essential data prior to any template being loaded
url: '',
abstract: true,
sticky: true,
views: {
'root': {
template: '<ui-view/>',
}
}
})
.state('root.worldmap', {
url : '/worldmap',
templateUrl : 'templates/worldmap.tmpl.html'
})
.state('root.faq', {
url : '/faq',
templateUrl : 'templates/faq.tmpl.html'
})
.state("otherwise", {
url: "*path",
views: {
'root': {
template: "",
controller: ['$injector', function($injector) {
var $state = $injector.get("$state");
$state.go('root.worldmap');
}]
}
},
});
$stickyStateProvider.enableDebug(true);
}]);
For info:
using this method of alternative cordova deviceready vs angular.element bootstrap for cordova / browser respectively
OK so the way to get this working is by removing the base href AND disabling html5 mode :
[optional] create & checkout a new branch called dev-cordova or similar
this allows you to switch quickly between browser and device code
delete / comment the <base href="/"> in the main index.html
ensure that html5 mode is disabled in app.js by either
$locationProvider.html5Mode({
enabled: false,
requireBase: false
});
or
$locationProvider.html5Mode(false);
Don't forget to run cordova build ios (after you grunt / gulp etc to compile the js files)
...this ensures the files in the cordova /platforms/ios/www directory are updated.
Related
I am really struggling with Angular since it is very fragile i think and I have a very simple case (probably the simplest case ever) which does not work yet.
Here is my module (so i do inject the library):
angular.module(
'module', ['ui.router']
My index.html:
<html data-ng-app="module">
<head>
... several libraries and my js files including ui-router library js + my app.js where the state definitions are located.
</head>
<body>
<div ui-view></div>
</body>
And why is not my template injected in ui-view?
EDIT: Sorry, i was in a hurry, forgot to add some details.. I have updated the app.js section like this:
.state('default',
{
url: '/',
template: '<h1>default</h1>'
})
.state('x',
{
url: '/x',
template: '<h1>X</h1>'
});
Now default state works as expected. But i call the url "host/x" i get a "Cannot GET /x".. when i call the url like "host/#x", it works.
But i have also this section for html5 mode in my app.js:
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
I have also this in the head section of my index.html:
<base href="/">
I thought, html5 should already handle the hash(#) part of the url? How can i get rid of that # in URL, so i can call directly "host/x"?
You need to specify the url property and go to this url to see this page. State should be something like:
.state("yourStateName", {
template: "<h1>My Contacts</h1>",
url: "/stateURL"
})
This is working example of url provider form my project:
angular.module("app")
.config(function ($urlRouterProvider, $locationProvider, $stateProvider) {
$locationProvider
.html5Mode(true);
$urlRouterProvider.when('/', '/url1');
$urlRouterProvider.when('', '/url2');
$urlRouterProvider.when('/url3', 'url4');
$urlRouterProvider.otherwise('/url5');
});
I am following a book called MEAN Machine. The code from the part in this book in question can be found at this Github Repo.
When clicking the links in /public/views/index.html which should be routed, I get file not found errors in the web browser.
The code (/public/js/app.routes.js) that does not seem to work:
// inject ngRoute for all our routing needs
angular.module('routerRoutes', ['ngRoute'])
// configure our routes
.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'views/pages/home.html',
controller : 'homeController',
controllerAs: 'home'
})
// route for the about page
.when('/about', {
templateUrl : 'views/pages/about.html',
controller : 'aboutController',
controllerAs: 'about'
})
// route for the contact page
.when('/contact', {
templateUrl : 'views/pages/contact.html',
controller : 'contactController',
controllerAs: 'contact'
});
$locationProvider.html5Mode(true);
});
In the index.html file, we are pointing to the correct files:
<script src="js/app.routes.js"></script>
<script src="js/app.js"></script>
To test their code, I changed the base tag in index.html to my folder's path which eliminated errors of not finding the above files.
Is this material dated? Also, I realize this book is not using Angular 2. Does Angular 2 vary drastically in routing and is this material deprecated?
Simply run command
node server.js
from '12-angular-routing' directory and open in browser http://localhost:8080
The problem is that browsers by default does not allow AJAX requests to files located on your local file system. In this case you should run your local server which serves client application(server.js is simple express server).
I am getting two flow in my two diff codes.
I am developing an ionicframework based app using its default (angular based ui-router) routing.
Now when i coded for the ionic this way.
*.config(["$stateProvider","$urlRouterProvider",function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider
.otherwise('oops');
$stateProvider
.state('dashboard',{
url:"/dashboard",
abstract: true,
templateUrl:'templates/dashboard.html',
controller:"myCtrl"
})
.state('courses',{
url:'/courses',
templateUrl:'templates/courses.html',
controller:'myCtrl'
})
.state('transactions',{
url:'/transactions',
templateUrl:'templates/transactions.html'
})
.state('oops',{
url:'/oops',
templateUrl:'templates/oops.html',
controller:'myCtrl'
})
}])*
view :
<ion-nav-view></ion-nav-view>
i found all my templates are getting loaded at once (on browser console testing) when i call my base route (also for any route,whichever i called for the first load of app).
where as when i use the ui-router for the nonionic app like :
myApp.config(function($stateProvider,$urlRouterProvider){
/*throw the rest url to home page*/
$urlRouterProvider.otherwise("/single");
$stateProvider
.state("single",{
url:"/single",
templateUrl:"templates/single.html"
})
.state("portfolio",{
url:'/portfolio',
templateUrl:'templates/portfolio.html',
controller:"myCtrl"
})
.state("nested",{
url:"/nested",
templateUrl:"templates/nested.html"
}
)
.state("nested.viwe1",{
url:"/view1",
templateUrl:"templates/nested.view1.html"
})
.state("nested.viwe2",{
url:"/view2",
templateUrl:"templates/nested.view2.html"
})
});
view:
<div ui-view class="my-element"></div>
only the demanded templates (configured with the route),is getting loaded.
So is the Ionic loads all template initially or else i am flowing wrong with the code.
Return the templateUrl by a function. Like this,
templateUrl: function() {return 'templates/courses.html';}
https://github.com/driftyco/ionic/issues/3819
http://ionicframework.com/docs/platform-customization/dynamic-templates.html
I am trying to create a simple App using ui-router. When I load a page the first time or reload the current page, everything is fine. However when I click on a different page, the entire app reloads in my ui-view and I get a warning in the log: "WARNING: Tried to load angular more than once.". I am using Express, Jade and Angular.
I have the following structure:
public
app
frontPage
frontPage.jade
institution
institution.jade
app.js
index.jade
server
server.js
server.js:
app.use(express.static(path.join(__dirname, '/public')));
app.get('/*', function (req, res) {
res.sendfile('./public/app/index.html');
});
app.js:
$locationProvider.html5Mode(true);
$stateProvider
.state('frontPage', {
url: '/app/frontPage/',
templateUrl: 'frontPage.html'})
.state('institution', {
url: '/app/institution/',
templateUrl: 'institution.html',
controller: 'institutionCtrl'
});
});
index.jade
#page-wrapper
.row
.col-lg-12
<ui-view></ui-view>
frontPage.jade
block content
h1 Page
p Welcome
The above structure worked with ng-route, so I am quite lost why it keeps reloading the entire page when I switched to ui-router.
I had created a loop with the templates. When I changed them to this, it worked:
$locationProvider.html5Mode(true);
$stateProvider.state('frontPage', {
url: '/',
templateUrl: 'app/frontPage/frontPage.html'
})
.state('institution', {
url: '/institution',
templateUrl: 'app/institution/institution.html',
controller: 'institutionCtrl'
});
I had this problem for about an hour. For me, the issue was that I had set the html5mode requireBase option to false.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
To fix this, I changed html5mode to this:
$locationProvider.html5Mode(true);
Then set a base in my HTML, like this:
<base href="/"></base>
I was under the impression that Angular would rewrite URLs that appear in href attributes of anchor tags within tempaltes, such that they would work whether in html5 mode or hashbang mode. The documentation for the location service seems to say that HTML Link Rewriting takes care of the hashbang situation. I would thus expect that when not in HTML5 mode, hashes would be inserted, and in HTML5 mode, they would not.
However, it seems that no rewriting is taking place. The following example does not allow me to just change the mode. All links in the application would need to be rewritten by hand (or derived from a variable at runtime. Am I required to manually rewrite all URLs depending on the mode?
I don't see any client-side url rewriting going on in Angular 1.0.6, 1.1.4 or 1.1.3. It seems that all href values need to be prepended with #/ for hashbang mode and / for html5 mode.
Is there some configuration necessary to cause rewriting? Am I misreading the docs? Doing something else silly?
Here's a small example:
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script>
</head>
<body>
<div ng-view></div>
<script>
angular.module('sample', [])
.config(
['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
//commenting out this line (switching to hashbang mode) breaks the app
//-- unless # is added to the templates
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
template: 'this is home. go to <a href="/about"/>about</a>'
});
$routeProvider.when('/about', {
template: 'this is about. go to <a href="/"/>home</a'
});
}
])
.run();
</script>
</body>
Addendum: in re-reading my question, I see that I used the term "rewriting" without an abundance of clarity as to who and when I wanted to do the rewriting. The question is about how to get Angular to rewrite the URLs when it renders paths and how to get it to interpret paths in the JS code uniformly across the two modes. It is not about how to cause a web server to do HTML5-compatible rewriting of requests.
The documentation is not very clear about AngularJS routing. It talks about Hashbang and HTML5 mode. In fact, AngularJS routing operates in three modes:
Hashbang Mode
HTML5 Mode
Hashbang in HTML5 Mode
For each mode there is a a respective LocationUrl class (LocationHashbangUrl, LocationUrl and LocationHashbangInHTML5Url).
In order to simulate URL rewriting you must actually set html5mode to true and decorate the $sniffer class as follows:
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
I will now explain this in more detail:
Hashbang Mode
Configuration:
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(false)
.hashPrefix('!');
This is the case when you need to use URLs with hashes in your HTML files such as in
link
In the Browser you must use the following Link: http://www.example.com/base/index.html#!/base/path
As you can see in pure Hashbang mode all links in the HTML files must begin with the base such as "index.html#!".
HTML5 Mode
Configuration:
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true);
You should set the base in HTML-file
<html>
<head>
<base href="/">
</head>
</html>
In this mode you can use links without the # in HTML files
link
Link in Browser:
http://www.example.com/base/path
Hashbang in HTML5 Mode
This mode is activated when we actually use HTML5 mode but in an incompatible browser. We can simulate this mode in a compatible browser by decorating the $sniffer service and setting history to false.
Configuration:
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true)
.hashPrefix('!');
Set the base in HTML-file:
<html>
<head>
<base href="/">
</head>
</html>
In this case the links can also be written without the hash in the HTML file
link
Link in Browser:
http://www.example.com/index.html#!/base/path
Fur future readers, if you are using Angular 1.6, you also need to change the hashPrefix:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('');
}]);
Don't forget to set the base in your HTML <head>:
<head>
<base href="/">
...
</head>
More info about the changelog here.
This took me a while to figure out so this is how I got it working - Angular WebAPI ASP Routing without the # for SEO
add to Index.html - base href="/">
Add $locationProvider.html5Mode(true); to app.config
I needed a certain controller (which was in the home controller) to be ignored for uploading images so I added that rule to RouteConfig
routes.MapRoute(
name: "Default2",
url: "Home/{*.}",
defaults: new { controller = "Home", action = "SaveImage" }
);
In Global.asax add the following - making sure to ignore api and image upload paths let them function as normal otherwise reroute everything else.
private const string ROOT_DOCUMENT = "/Index.html";
protected void Application_BeginRequest(Object sender, EventArgs e)
{
var path = Request.Url.AbsolutePath;
var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase);
var isImageUpload = path.StartsWith("/home", StringComparison.InvariantCultureIgnoreCase);
if (isApi || isImageUpload)
return;
string url = Request.Url.LocalPath;
if (!System.IO.File.Exists(Context.Server.MapPath(url)))
Context.RewritePath(ROOT_DOCUMENT);
}
Make sure to use $location.url('/XXX') and not window.location ... to redirect
Reference the CSS files with absolute path
and not
<link href="app/content/bootstrapwc.css" rel="stylesheet" />
Final note - doing it this way gave me full control and I did not need to do anything to the web config.
Hope this helps as this took me a while to figure out.
I wanted to be able to access my application with the HTML5 mode and a fixed token and then switch to the hashbang method (to keep the token so the user can refresh his page).
URL for accessing my app:
http://myapp.com/amazing_url?token=super_token
Then when the user loads the page:
http://myapp.com/amazing_url?token=super_token#/amazing_url
Then when the user navigates:
http://myapp.com/amazing_url?token=super_token#/another_url
With this I keep the token in the URL and keep the state when the user is browsing. I lost a bit of visibility of the URL, but there is no perfect way of doing it.
So don't enable the HTML5 mode and then add this controller:
.config ($stateProvider)->
$stateProvider.state('home-loading', {
url: '/',
controller: 'homeController'
})
.controller 'homeController', ($state, $location)->
if window.location.pathname != '/'
$location.url(window.location.pathname+window.location.search).replace()
else
$state.go('home', {}, { location: 'replace' })