MOCKSTACKS
EN
Questions And Answers

More Tutorials









AngularJS gotchas and traps

Things to do when using html5Mode


When using html5Mode([mode]) it is necessary that:

1. You specify the base URL for the application with a in the head of your index.html.
2. It is important that the base tag comes before any tags with url requests. Otherwise, this might result in this
error - "Resource interpreted as stylesheet but transferred with MIME type text/html"
.For example:
<head>
 <meta charset="utf-8">
 <title>Job Seeker</title>
 <base href="/">
 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
 <link rel="stylesheet" href="/styles/main.css">
</head>

3. If you do no want to specify a base tag, configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode() like this:

$locationProvider.html5Mode({
 enabled: true,
 requireBase: false
});

4. In order to support direct loading of HTML5 URLs, you need to enabler server-side URL rewriting.

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). Requiring a tag is also important for this case, as it allows Angular to differentiate between the part of the url that is the application base and the path that should be handled by the application.

An excellent resource for request rewriting examples for various HTTP server implementations can be found in the ui-router FAQ - How to: Configure your server to work with html5Mode. For example, Apache

 RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
nginx
server {
 server_name my-app;
 root /path/to/app;
 location / {
 try_files $uri $uri/ /index.html;
 }
}
Express
var express = require('express');
var app = express();
 app.use('/js', express.static(__dirname + '/js'));
 app.use('/dist', express.static(__dirname + '/../dist'));
 app.use('/css', express.static(__dirname + '/css'));
 app.use('/partials', express.static(__dirname + '/partials'));
 app.all('/*', function(req, res, next) {
 // Just send the index.html for other files to support HTML5Mode
 res.sendFile('index.html', { root: __dirname });
});
 app.listen(3006); //the port you want to use



Conclusion

In this page (written and validated by ) you learned about AngularJS JS gotchas and traps . What's Next? If you are interested in completing AngularJS tutorial, we encourage you simply to start here: AngularJS Tutorial.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.