I tried to remove '#' from angular-urls, I have done the tweaks in my front-end like
$locationProvider.html5Mode(true);
<base href="/*"> in my view file.
I am using express in by backend. THough Its works well but when I refresh page it gives me error url not found.
My default url is like from express to render view is like,
//server.js
app.use(express.static('app'));
var routes = require('./routes/index');
app.use('/', routes);
/routes/index
router.all('/', function(req, res) {
res.render('home');
});
It works in case if I click http://localhost:1337/ first. It moves nicely to this http://localhost:1337/first-param but when I click http://localhost:1337/first-param directly without going to base url it gives me not found error.
Please don't give me hint for .htaccess. I don't want to use .htaccess.
Well.. you are only handling '/' route in your app. So every time you ask the server for another route say '/something', the server does not know what to do.
Try This (Use router.get() instead of router.all() to only handle get requests):
router.get('/*', function(req, res) {
res.render('home');
});
This should handle all the routes.
UPDATE
Of course you might want to have other routes handled by your express app, say for your API.
To do that, I suggest you create your api in the format '/api/foo/{bar}'
And you set up your router in the following way :
router.route(/^((?!\/(api)).)*$/).get(function(req, res){res.render('home')});
The regular expression holds true for everything that does not start with /api and returns the home page.
Remember, add this configuration BELOW all the other routes to maintain the heirarchy.
To summarize : The last snippet of code handles all the routes except the ones that start with /api and you design your API to always start with /api . Use this method and it should work just fine.
Use superstatic to serve your application.
Then use the options in my answer here: Combining AngularJS, HTML5 locations and superstatic
Related
I'm using NodeJS http-server to code an AngularJS App.
I'm having a problem. When I try to access directly the url in the browser the Angular does not intercept the URL to show me the content.
If I type the URL manually like: http://127.0.0.1:8080/#!/clients it works, but not when I type directly: http://127.0.0.1:8080/clients
I want the http://127.0.0.1:8080/#! as default in the http-server.
I'm using in AngularJS the html5 mode and the hash prefix:
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
Is there a way to rewrite the url from http-server with the default /#!/ before the address?
Note: Below is an example of a more complex Express.js URL rewriting situation, where you may not wish to "catch all" routes, but instead discern between routes for views and routes for the server-side api. All solutions I could find only showed a generic catch-all approach, which did not fit practical application for an app whom requires access to server-side routes. If you do simply want the "catch all", see the other yellow note at the bottom of this answer for links on how to set that up.
If you turn off html5 mode, by default, you should be in hashbang (#!) mode...Turning on html5Mode allows you to remove the hashbang (#!), if you wish.
Here's more about the different modes:
https://docs.angularjs.org/guide/$location
HTML5 mode being enabled, gives you normal looking, non-hashbang URLs. Normally, when HTML5 mode is enabled, you'll hit the issue you described where pages within your app will load OK internally, but if you try and enter the URL directly into your browser (or access it via a bookmark), you'll get a Cannot GET error.
First, be sure you've set a <base> tag in the <head> your primary index file, like this:
<head>
<!-- all your script tags, etc etc -->
<base href="/">
<!-- rest of your front-end dependencies etc -->
</head>
That way Angular will know which is your primary index to load partials within.
Secondly, I will try and tell you how I approached re-writing my URLs in Express to solve the issue you have described. My answer may be somewhat incomplete, as I am still learning, and in truth, I do not fully understand why, once HTML5 mode is enabled in Angular, that the routing does not work properly. There also may be better ways to approach the problem as opposed to how I solved mine.
It seemed that once I switched to HTML5 mode, Angular intercepted my routes and was causing an issue when I was trying to use the $http service to request server-side api routes.
It seemed like turning on HTML5 mode basically took over all of my routing, and I had to find a way to tell Express to either pass a route to Angular or to continue the route (away from angular) using next(). This was my best assessment.
What I Did:
Enabled HTML5 mode [as you have done in your example], and set a
<base> in my index file (as noted above).
Rewrote my routing in ExpressJS using the native express.Router():
See: https://expressjs.com/en/guide/routing.html
At the very bottom of that page are instructions for express.Router()
I'll show you how I did it below
My Approach/Pseudo-code:
I setup a method in my Router so that if the incoming request contained /api/ (checked via regex), I would invoke ExpressJS's next() method and continue along in the route, which would hit the server controller. Otherwise, if the URL did not contain /api/, I the appropriate view page was delivered, in which Angular took over.
How I setup my express.Router():
I created a middleware folder in my app and created a file called api-check.js.
// Setup any Dependencies:
var express = require('express'),
router = express.Router(), // very important!
path = require('path');
// Setup Router Middleware:
/*
Notes: The `apiChecker` function below will run any time a request is made.
The API Checker will do a regex comparison to see if the request URL contained
the `/api/` pattern, to which instead of serving the HTML file for HTML5 mode,
it will instead `next()` along so the API route can reach the appropriate
server-side controller.
*/
router.use(function apiChecker (req, res, next) {
console.log('/// ROUTER RUNNING ///'); // will print on every route
console.log('URL:', req.originalUrl); // will show requested URL
var regex = /(\/api\/)/g; // pattern which checks for `/api/` in the URL
if (regex.test(req.originalUrl)) { // if the URL contains the pattern, then `next()`
console.log('THIS IS AN API REQUEST'); // api detected
next();
} else { // if the URL does not contain `/api`:
res.sendFile(path.join(__dirname, './../../client/index.html')); // delivers index.html which angular-route will then load appropriate partial
}
})
module.exports = router; // exports router (which now has my apiChecked method attached to it)
How I added my express.Router() to my Express App:
Depending upon how your code is modularized, etc, just go ahead and in the right place require your module (you will have to adjust the direct path depending upon your project), and then app.use() the module to intercept all of your routes and direct them to your Router:
// Get Router:
var apiCheck = require('./../middleware/api-check');
// Use Router to intercept all routes:
app.use('/*', apiCheck);
Now, any route (thus the /*) will go through the express.Router() apiChecker() function, and be assessed. If the requesting URL contains /api, then next() will be invoked and the server-side controller will be reached. Otherwise, if the /api slug is not detected in the URL, then the primary index.html base file will be sent, so that Angular can deliver the appropriate view via $routeProvider.
Note: If you don't need to discern between incoming routes, and just want to "catch all" incoming routes and hand back your <base> index file, you can do as outlined in another stackoverflow answer here. That answer uses app.get() to catch all GET requests to hand back your index. If you also need to catch POST requests or others, you may want to instead use app.all(), in place of app.get() in the aforementioned example. This will catch all routes, whether GET, POST, etc. Read more in the Express documentation here.
This was my personal solution, and there may be better, but this solved my problem! Would be interested to know what others recommend! Of course the downside to this, is that I have to build all of my internal api routes to include /api/ in them, however that seems to be OK in design overall, and maybe even useful in keeping me from confusing my routes from front-side views.
Hope this at least helps somewhat, let me know if you need any clarifications :)
I was trying to remove '#' from URL.
I looked through a lot of example doing so. Almost all examples followed same 2 steps which I followed.
Step 1: Enable HTML5 mode
.config(function ($routeProvider,$locationProvider){
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/products/',{
templateUrl:'views/HomeMain/products.html',
controller:'MainCtrl',
controllerAs:'main'
});
$locationProvider.html5Mode(true);
})
Step 2: Add basetag
<head>
<base href="/">
</head>
After following above mentioned steps I successfully removed '#' from the URL.
Whenever I navigate to 'products' page URL looks like http://localhost:9001/products/ which is exactly what I want.
But, whenever I reload products page, this error is displayed in the browser window:
Cannot GET /products/
Why am I receiving this error? How do I handle this error?
When using # you are browsing in client side and urls are never sent to server. However when you use html5Mode, you should also configure server side, to rewrite to urls and tell client will handle it
For asp.net see this
You had a URL like http://localhost:9001/#/products/ before enabling the HTML5 mode. Please note that the contents of the hash are never submitted to the server. So what was requested from the server was http://localhost:9001 only.
As soon as server returns response, and angular takes over the control, it sees the /products/ fragment of the hash, and reacts accordingly.
After enabling HTML5 mode, your URL becomes http://localhost:9001 for your home page. Then you visit the route for products, which makes your URL http://localhost:9001/products/. Please note that because HTML5 mode uses browser's history API, your page is not refreshed entirely, even if the URL (not the hash fragment) is changed.
Now, if you refresh your page, what server receives is http://localhost:9001/products/, and since this route is not handled on the server, it returns a 404 error.
For making this to work, you need to implement logic to return appropriate contents when this route is visited. For Node based apps, you can follow this answer.
This is because the web server receiving the request looks for a resource matching the full url on the server, which doesn't exist because the angular portion of the url refers to a route in your angular application and needs to be handled in the client browser.
You can do a URL Rewrite if using NodeJS/ExpressJS/IIS. Refer this blog for the solution:
http://jasonwatmore.com/post/2016/07/26/angularjs-enable-html5-mode-page-refresh-without-404-errors-in-nodejs-and-iis
I have read several other answers on this topic, but I do not fully understand how this works. I have an angular front-end. I am trying to use $routeProvider to load partials into my page for a single page application. I am getting 404 for the $routeProvider requests and I think there must be a way to set this up without declaring a route for every partial on the server. There will be many more partials soon even though I only have one declared in my config right now. My routeProvider code looks like this:
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/register', {
templateUrl: 'partials/register',
controller: 'registerCtrl'
})
}])
but going to localhost:3000/register gives a 404 error. I looked at this response on SO as well as some others, but I have not been able to put all the pieces together.
Express 4, NodeJS, AngularJS routing
How is this solution from the above post
app.use('/*', function(req, res){
res.sendfile(__dirname + '/public/index.html');
});
able to find the partials and return them to the front end (btw this snippet did not work for me).
My app isn't much different than creating a new express app with express generator. I have these require and use statements related to routing:
var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes);
app.use('/users', users);
and this route to serve my home page in routes/index:
router.get('/', function(req, res, next) {
res.render('home');
});
When you use front-end routing you don't have to declare a route for every partial on the server. The simplest form of the solution is to let the user hit any route with a wildcard match on the back, and no matter what route they're viewing you just serve up the same front end application template. So in fact you for the most part do away with backend routing altogether. Once your JS kicks in and reads the current route out of the navbar, it will resolve the appropriate view.
Check out one of the tutorials for how to configure your express backend to handle this:
http://fdietz.github.io/recipes-with-angular-js/backend-integration-with-node-express/implementing-client-side-routing.html
There's some nuance and previously there was controversy around this structure because of things like SEO, but a lot of that has been cleared away by Google now being able to parse JS and resolve the view in SPAs (http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html)
Of course, you will actually have some routes on the backend in order to accept api requests, but ideally that's it unless you choose to get fancy and go isomorphic, prerendering the js on the backend and serving a completed view (though that's better suited in React for now, at least until Angular 2.0)
I apologize this question turned out a bit long, but I have worked on this for some time and really needed to explain all the story.
Background: App based on MEAN stack, trying to authorize Facebook logins using Passport.js.
Following Passport.js guide I implemented something similar to:
// HTML
Add a Facebook login
// send to facebook to do the authentication
app.get('/connect/facebook',isLoggedIn, passport.authorize('facebook',
{ scope : 'email' })
);
// handle the callback after facebook has authorized the user
app.get('/connect/facebook/callback',
passport.authorize('facebook', {
successRedirect : '/profile',
failureRedirect : '/profile'
}));
Notice the target=_self in the html in order to skip Angular routing.
Clearly, authorization works fine. However, redirection does not work, as the routing is handled by Angular. After authorization I never land on /profile (but on the default Angular route).
Therefore, I tried with a custom callback as suggested by Passport.js here, with the hope of passing json data to Angular, and let Angular do the routing. I ended up doing something like:
// In the controller
$http.get("/connect/facebook").success(function(data){
// here I wait for json data from the server and do the routing
});
// I call this route from Angular
app.get('/connect/facebook',isLoggedIn,passport.authorize('facebook',
{ scope : 'email' })
);
// But Facebook lands here!
app.get('/connect/facebook/callback',function(req, res, next) {
passport.authorize('facebook', function(err, user, info) {
res.json({something:smtg});
...
Clearly custom callbacks work for local-login, as Passport.js explains. But here do you see the problem? I call /connect/facebook from Angular, but I should receive some json from /connect/facebook/callback.
I am about to give up Passport, but before this, do you see any solution which would allow landing on /profile after FB authorization, perhaps with a custom message? Many thanks for reading through.
EDIT:
The same question had been reported as an issue on the Passport-Facebook GitHub account. Some additional attempts have been posted there, but not quite the fix yet.
This is a bit more in depth than can be described in one answer, but I'll try to start pointing you in the right direction.
Essentially, Angular.js routes are not really HTML routes at all, but an internal route structure that happens to use the URL for use of the end user. Remember that Angular.js is a client script, and that a full page reload is not desired, as this will reload the entire script. Therefore, /# is used to trick the browser into jumping to a specific bit of code within the already loaded script. (as opposed to the traditional anchor location in the HTML document). Unfortunately (or fortunately), HTML 5 mode allows you to hide the /# part of the url, so instead of seeing http://somesite.com/#/someroute you just see http://somesite.com/someroute. Rest assured, however, that the /# is still there. Angular.js uses the HTML5 pushState (AKA HistoryAPI) to perform the magic replacement.
Given this, if you have called a server route, you are outside the Angular.js script, and any call to load the angular script again will start from the very beginning. You can't actually call your Angular.js route from the server without a full reload. Therefore, you are really doing a double route redirect here. Your server should be calling it's default route for angular, appending /#/someroute to the call. The angular.js page will load, parse off the /#, and redirect to the correct angular route. Keep in mind, however, that if there was any dependency on already loaded objects, those are no longer in memory. Therefore, any route accessed this way should operate as if it is an entry point to your application.
Effectively, you should try using successRedirect : '#/profile', keeping in mind that the profile route in angular should be treated as an app entry point.
Hopefully this gets you started.
If #Claies's way is not working, is it possible you have not get rid of the #= fragment from the facebook callback.
Have a read of this post
I was trying to preetify my URL in angular js app and remove the hash. What I did was added in line in my app.config function:
$locationProvider.html5Mode(true);
But this issues I am still facing are:
If I open a page like this $window.location.href = '#/sales'; the slash is encoded and page does not opens.
If I directly type in my browser localhost:9000/sales without hash the page does not opens.
Can someone please help.
To add to it, my base url is: http://localhost:9000
You should choose just one option: either you have hashes in the url, or not.
If hashes are ok - then just remove $locationProvider.html5Mode(true); from your code.
If you really want your app to work w/o hashes in the url then follow this (probably incomplete) checklist:
Remove # from any urls on your page
Configure your web-server to feed the same webapp on all requests which your webapp recognizes. I.e. If your webapp routing knows what to do when user agent is requesting /sales - then make sure that your web-server or backend platform you are using serves the page with your web-app