node.js - AngularJS and NodeJS http-server: rewrite URL -

i'm using nodejs http-server code angularjs app.
i'm having problem. when try access directly url in browser angular not intercept url show me content.
if type url manually like: http://127.0.0.1:8080/#!/clients works, not when type directly: http://127.0.0.1:8080/clients

i want http://127.0.0.1:8080/#! default in http-server.

i'm using in angularjs html5 mode , hash prefix:

$locationprovider.html5mode(true); $locationprovider.hashprefix('!');

is there way rewrite url http-server default /#!/ before address?

note: below example of more complex express.js url rewriting situation, may not wish "catch all" routes, instead discern between routes views , routes server-side api. solutions find showed generic catch-all approach, did not fit practical application app whom requires access server-side routes. if want "catch all", see other yellow note @ bottom of answer links on how set up.

if turn off html5 mode, default, should in hashbang (#!) mode...turning on html5mode allows remove hashbang (#!), if wish.

here's more different modes: https://docs.angularjs.org/guide/$location

html5 mode being enabled, gives normal looking, non-hashbang urls. normally, when html5 mode enabled, you'll hit issue described pages within app load ok internally, if try , enter url directly browser (or access via bookmark), you'll cannot get error.

first, sure you've set <base> tag in <head> primary index file, this:

<head>     <!-- script tags, etc etc -->     <base href="/">     <!-- rest of front-end dependencies etc --> </head>

that way angular know primary index load partials within.

secondly, try , tell how approached re-writing urls in express solve issue have described. answer may incomplete, still learning, , in truth, not understand why, once html5 mode enabled in angular, routing not work properly. there may better ways approach problem opposed how solved mine.

it seemed once switched html5 mode, angular intercepted routes , causing issue when trying use $http service request server-side api routes.

it seemed turning on html5 mode took on of routing, , had find way tell express either pass route angular or continue route (away angular) using next(). best assessment.

what did:

enabled html5 mode [as have done in example], , set <base> in index file (as noted above).
rewrote routing in expressjs using native express.router():
- see: https://expressjs.com/en/guide/routing.html
- at bottom of page instructions express.router()
- i'll show how did below

my approach/pseudo-code:

i setup method in router if incoming request contained /api/ (checked via regex), invoke expressjs's next() method , continue along in route, hit server controller. otherwise, if url did not contain /api/, appropriate view page delivered, in angular took over.

how setup `express.router()`:

i created middleware folder in app , created file called api-check.js.

// setup dependencies: var express = require('express'),     router = express.router(), // important!     path = require('path');  // setup router middleware:     /*         notes: `apichecker` function below run time request made.         api checker regex comparison see if request url contained         `/api/` pattern, instead of serving html file html5 mode,         instead `next()` along api route can reach appropriate         server-side controller.     */ router.use(function apichecker (req, res, next) {     console.log('/// router running ///'); // print on every route     console.log('url:', req.originalurl); // show requested url     var regex = /(\/api\/)/g; // pattern checks `/api/` in url     if (regex.test(req.originalurl)) { // if url contains pattern, `next()`         console.log('this api request'); // api detected         next();     } else { // if url not contain `/api`:         res.sendfile(path.join(__dirname, './../../client/index.html'));     // delivers index.html angular-route load appropriate partial     } })  module.exports = router; // exports router (which has apichecked method attached it)

how added `express.router()` express app:

depending upon how code modularized, etc, go ahead , in right place require module (you have adjust direct path depending upon project), , app.use() module intercept of routes , direct them router:

// router: var apicheck = require('./../middleware/api-check');  // use router intercept routes: app.use('/*', apicheck);

now, route (thus /*) go through express.router() apichecker() function, , assessed. if requesting url contains /api, next() invoked , server-side controller reached. otherwise, if /api slug not detected in url, primary index.html base file sent, angular can deliver appropriate view via $routeprovider.

note: if don't need discern between incoming routes, , want "catch all" incoming routes , hand <base> index file, can outlined in stackoverflow answer here. answer uses app.get() catch get requests hand index. if need catch post requests or others, may want instead use app.all(), in place of app.get() in aforementioned example. catch routes, whether get, post, etc. read more in express documentation here.

this personal solution, , there may better, solved problem! interested know others recommend! of course downside this, have build of internal api routes include /api/ in them, seems ok in design overall, , maybe useful in keeping me confusing routes front-side views.

hope @ least helps somewhat, let me know if need clarifications :)

Search This Blog

MOno