I have a situation with my Angular 1.8.x routing.
In my angularApp.js file, I have html5mode enabled like:
$locationProvider.html5Mode(true);
My NodeJS app does the following:
module.exports = function(express, app){
var router = express.Router();
router.get('/*', function(req, res){
res.render('index.html');
});
app.use('/', router);
};
I do, however, have an issue with a third party library - Snipcart. What that is supposed to do is include E-commerce features to a frontend app. However, Snipcart's "checkout" button links to a URL with # in it and the Snipcart library doesn't work (doesn't go to the checkout and seems to do a few loops of the current page I am on).
My question is simply this - how can I workaround this? html5mode is a must unfortunately but I need to also be able to support links with a # in it.
Thanks in advance!
I don't know if this can be classed as an answer but I spoke to Snipcart and couldn't get it to work. I guess Angular 1 is just indeed that old
You can also consider urls without the hashtag in your project
http://joeljoseph.net/angularjs-remove-hash-from-url/
Related
Why does Angular sometimes use a hash in the URL and other times use a hashbang? I've started writing two Angular apps from scratch. Neither are using HTML5 mode. Both have the same default route. However, the default URLs display differently.
I've been seeing this random behaviour for at least a year... long before angular-route v1.6. Also, I've always used angular-ui-router.
The default route:
configRoutes.$inject = ['$urlRouterProvider'];
function configRoutes ($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}
App #1 resolves this...
http://localhost:3000
... to this ...
http://localhost:3000/#/
App #2 resolves this...
http://localhost:3001
... to this ...
http://localhost:3001/#!/
Note the last two characters in the default URL.
I know how to activate HTML5 mode and pretty URLs. That is not what I'm asking. I would really like to understand the significance of both URLs above and why Angular is writing them differently.
Current versions:
angular-ui-router v0.3.2
angular v1.6.0
When we upgraded from angular 1.5 to angular 1.6, the URL of our app changed from /#/ to /#!/. We fixed the problem by configuring the hashPrefix in the application config:
angular.module("myApp").config(function($locationProvider) {
$locationProvider.hashPrefix("");
});
I am trying to learn how to use stormpath with express. I have a fullstack angular/node project that I generated with yeoman and the angular-fullstack generator. I got login, register and forgot password to work. But when I want to add a restriction on one of my routes so it only works for logged in users, it won't let anyone pass.
I initialise stormpath in my app.js on the server like this:
var stormpath = require('express-stormpath');
app.use(stormpath.init(app, {
apiKeyId: 'XXXXXXXXXXXXXXXXXXX',
apiKeySecret: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
application: 'https://api.stormpath.com/v1/applications/XXXXXXXXXXXXXXXXXXX',
secretKey: 'XXXXXXXXXXXXXXXXXXX',
expandCustomData: true,
enableForgotPassword: true
}));
My route in my api index.js file looks like this:
var express = require('express');
var stormpath = require('express-stormpath');
var router = express.Router();
router.post('/:id/vote', stormpath.loginRequired, function(req, res){
console.log("User clicked vote button!");
console.log("User e-mail: "+res.user.email);
});
And the problem I am experiencing is that when I call the post route, I get no logs at all. I am logged in on the site but it seems it doesn't let me access the route. If I remove stormpath.loginRequired, then it works, but then I am missing the user data.
Thank you for the help!
The express-stormpath module isn't yet designed for use with single-page applications like Angular. We have a seperate (beta!) module which is designed for Angular: stormpath-sdk-express
We have a detailed guide which explains how to use that module with Angular:
https://docs.stormpath.com/angularjs/guide/
Note: we are actively working on combining these modules, so there will be a future release where we combine all the features into one.
Hope this helps!
I'm using AngularJS and ExpressJS and having an issue with routing. I saw many other posts but none of those solutions seemed to work. Here is my routes in Express:
module.exports = function(app, auth) {
//Api routes
var mycontroller = require('../app/controllers/mycontroller');
app.get('/api/dostuff/:id', mycontroller.getBlockByHash);
//Home route
app.get("/", function(req, res) {
res.render('index');
});
};
When I go to my root /, everything works as expected. ExpressJS serves up my index and angular picks up the rest. When I click a link /blocks, it works as expected since AngularJS picks up the route. But when I refresh, I get a 404 not found error.
I tried app.get('*' instead, but that gives me a completely different error where nothing loads.
I'm using Jade to create the basic page structure with Express. My Express config is:
app.use(express.favicon());
app.use(express.static(config.root + '/public'));
When using html5Mode the documentation says:
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)
What it doesn't mention is:
You should exclude static assets like scripts/styles/images/fonts etc.
You should also exclude your Restful API.
Your case:
The error you got there is express serving html into script tags and the browser fails to parse them as a valid javascript.
Use express.static to serve static assets and then use app.get('*', for redirecting all other requests to your angular.js entry point (index.html).
express.js middleware order do counts!
express.static must be declared before app.router
Node.js / Express.js - How does app.router work?
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.
I am building an app with Backbone and Yeoman. I am having an issue with the routing.
I have the following routes set up:
'test' : testMethod,
'' : index
I have set up pushstate:
Backbone.history.start({pushState: true});
I am using Chrome
If enter myApp.com#test the url changes to myApp.com/test and testMethod() fires correctly.
However if I try goto myApp.com/test directly or refresh after the browser has changed the url from # to / then I get a 404.
I am using the Yeoman built in server to test the pages. Could this be causing the issue?
I am not sure if you are using BBB within Yeoman. If you are, this should not be an issue. If you are not using BBB, this is a known issue. BBB has it's rewrite rules setup correctly to use pushstate, but yeoman's built in server does not seem to adopt this. You could edit your grunt.js file with your own rewrite rules to get pushstate working correctly. Some of the users in the above mentioned link have done this successfully.
When your app goes live, you will either need to serve those urls through your server or edit your rewrite rules to do the same. If the latter, and your application relies on SEO, SEO will suffer greatly.