Angular-routing in HTML5mode mit Node.js

Ich weiß, es gibt andere Antworten auf diese, aber Sie scheinen Vorbehalte.

Diese Ursachen eine Umleitung, die tödlich sein können für mein front-end-app, die benutzt Mixpanel, und eine Doppel-Belastung von Mixpanel wird ein Maximum Call Stack Size Exceeded Fehler im browser.

Diese verwendet man sendFile , die ich persönlich nicht bekommen, um zu arbeiten. Versuchen, zu diagnostizieren, bin ich nur empfohlen, um express.static().

Derzeit mein code sieht wie folgt aus:

home.js - Einige Routen, die Letzte soll die front-end Website.

var indexPath = path.resolve( __dirname, '../' + process.env.PUBLIC_FOLDER )

router.get( '/:user/:stream/:slug', function( req, res, next ) {

    if ( req.headers['user-agent'].indexOf( 'facebook' ) != -1 ) {
        //stuff to handle the Facebook crawler
    } else return next()
})

router.get( '/*', function( req, res ) {
    express.static( indexPath )
})

server.js - Konfiguration node/express

app = express();

app 
    .use( morgan( 'dev' ) )
    .use(bodyParser.urlencoded( { limit: '50mb', extended: true } ) )
    .use( bodyParser.json( { limit: '50mb' } ) )
    .use( '/api', require('./routes/usersRoute.js') )
    .use( '/', require( './routes/home' ) )
    .on( 'error', function( error ){
       console.log( "Error: " + hostNames[i] + "\n" + error.message )
       console.log( error.stack )
    })

http
    .createServer( app ).listen( process.env.PORT )
    .on( 'error', function( error ){
       console.log( "Error: " + hostNames[i] + "\n" + error.message )
       console.log( error.stack )
    })

Paar mehr Infos

Der Grund, warum Sie sehen können, bin ich versucht zu verwenden express.static() ist, weil wenn ich res.sendfile() ich ein problem wie diese, wo die Konsole sagt Unexpected token '<'. Leider ist die Antwort nicht die genaue Korrektur, und auch nicht der Fragesteller, die sagt, Sie das problem gelöst hat, aber nicht teilen eine Antwort.

In meiner trial-and-error habe ich Hinzugefügt einige mehr, um auszudrücken, wie dies

.use( '/app/app.js', express.static( indexPath + '/app/app.js' ) )
.use( '/app/views', express.static( indexPath + '/app/views' ) )
.use( '/app/controllers', express.static( indexPath + '/app/views' ) )
.use( '/app/directives', express.static( indexPath + '/app/views' ) )
.use( '/app/vendor', express.static( indexPath + '/app/vendor' ) )
.use( '/js', express.static( indexPath + '/js' ) )
.use( '/css', express.static( indexPath + '/css' ) )
.use( '/fonts', express.static( indexPath + '/fonts' ) )
.use( '/images', express.static( indexPath + '/images' ) )
.use( '/api', require('./routes/usersRoute.js') )
.all( '/*', require( './routes/home' ) )

Und in meinem home.js Routen-Dateien Hinzugefügt, das

router.get( '/*', function ( req, res ) {
    res.status( 200 ).set( { 'content-type': 'text/html; charset=utf-8' } )
    .sendfile( indexPath + '/index.html' )
})

Und im browser sehe ich alle meine Dateien laden, aber mit der < oben genannten Fehler. Ich sehe das /*/ route genannt wird, Hunderte Male, wenn ich einen refresh, so dass ich denke, dass die .use( '...', ... ) Konfigurationen werden ignoriert.

Hier ist ein weiteres Beispiel, beantragt von Jonas unten.

var indexPath = path.resolve( __dirname, process.env.PUBLIC_FOLDER )

mongoose.connect( process.env.MONGOLAB_URI )

app = express();

app 
    .use( morgan( 'dev' ) )
    .use(bodyParser.urlencoded( { limit: '50mb', extended: true } ) )
    .use( bodyParser.json( { limit: '50mb' } ) )
    .use( '/api', require('./routes/usersRoute.js') )
    .use( '/', require( './routes/home.js' ) )
    .use( express.static( indexPath ) )
    .on( 'error', function( error ){
       console.log( "Error: " + hostNames[i] + "\n" + error.message )
       console.log( error.stack )
    })

Ich habe auch das gleiche getan, ohne die .use( '/', require( './routes/home.js' ) ) Linie, um zu versuchen, einzugrenzen, jedes problem, aber es ist das gleiche Ergebnis. Wird die Seite geladen, wenn ich die # in der URL, aber der browser wird entfernen Sie die # (soweit so gut). Aber wenn ich drücken Sie auf refresh, oder setzen Sie die URL manuell, sans-hashbang, es gibt einen Fehler wie Cannot GET /home/splash, wo /home/splash ist welchen Weg ich gehe.

Wie füge ich ein Kopfgeld auf diese? Es ist schon seit 4 Tagen...
Ich bin kein Experte mit express, aber ich habe noch nie jemand schief gehen, wenn Sie die folgenden Proben in der UI-Router-FAQ, die zeigt, mit app.all eher als router.get.
Haben Sie überprüft, die Pfade übergeben express.static gültig sind? Was ist der Wert von indexPath?
machen Sie einfach var app = express(); app.configure(function() { ... app.use(express.static(__dirname + '/public')); ... }
Ich glaube nicht, dass app.konfigurieren ist Teil express 4.
Lol natürlich ist es als optional, aber immer noch. expressjs.com/api.html#app.configure

InformationsquelleAutor Noah | 2015-07-09

Du vielleicht die express-middleware in die falsche Richtung. Blick auf die Dokumentation sagt mir zum Beispiel, dass der folgende code

.use( '/images', express.static( indexPath + '/images' ) )

Dient eine Datei unter dem Ordner indexPath + '/images' mit solchen URLs:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/images/logo.png
http://localhost:3000/images/whatever.jpg

Ist, dass das, was Sie erwarten würden, es zu tun?

Mein Vorschlag ist die änderung von

.use( '/', require( './routes/home' ) )

.use(express.static( indexPath ))

Weil laut der Dokumentation, Sie dienen alle statischen Dateien, die unter der indexPath Ordner aus dem root-Pfad, aka. ohne Präfix.

Ich denke, dass ist alles, was ich kann helfen, mit dem input, den Sie gab, so weit. Wenn das nicht den trick tun, können Sie vielleicht teilen Sie einige kleine code-Beispiel, das ich verwenden kann, um es zu reproduzieren, auf meinem eigenen.

UPDATE

Ok. Ich habe versucht, erstellen ein einfaches Beispiel dafür. Ich machte es Arbeit in der folgenden Weise.
Meine Verzeichnisstruktur ist wie folgt:

|- index.js
|- public/
|---- index.html
|---- test.html
|---- main.js
|---- angular.js
|---- angular-route.js

index.js ist die node-server. Achten Sie auf die Reihenfolge der routing -. Ich habe auch einige /home/login Beispiel deutlich zu machen, wie Sie zum hinzufügen anderer server Routen, die nicht durch eckige.

var http = require('http');
var express = require('express');
var app = express();

app
    .use(express.static('public'))
    .get('/home/login', function (req, res) {
        console.log('Login request');
        res.status(200).send('Login from server.');
    })
    .all('/*', function ( req, res ) {
        console.log('All');
        res
            .status( 200 )
            .set( { 'content-type': 'text/html; charset=utf-8' } )
            .sendfile('public/index.html' );
    })
    .on( 'error', function( error ){
       console.log( "Error: \n" + error.message );
       console.log( error.stack );
    });

http
    .createServer( app ).listen( 8080 )
    .on( 'error', function( error ){
       console.log( "Error: \n" + error.message );
       console.log( error.stack );
    });

console.log('Serving app on port 8080');

index.html ist ziemlich einfach.

<!doctype html>
<html>
<head>
    <title>Angular HTML5 express test</title>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="angular-route.js"></script>
    <script type="text/javascript" src="main.js">
    </script>
</head>
<body ng-app="app">
    <div ng-view></div>
</body>
</html>

main.html fügt nur einige Inhalte. Wichtig ist der link zu /test

<div>
    <h1>This is just a {{val}}</h1>
    <button ng-click="clicked()">Click me!</button>
    <span>You clicked {{counter}} times</span>
    <a href="/test">test me!</a>
</div>

test.html ist eigentlich irrelevant

<div>
    <h4>What a beautiful day to test HTML5</h4>
</div>

main.js ist tun der Kern eckig html5 arbeiten

angular.module('app', ['ngRoute'])
    .config(function($locationProvider) {
        $locationProvider
            .html5Mode({
                enabled: true, //set HTML5 mode
                requireBase: false //I removed this to keep it simple, but you can set your own base url
            });
    })
    .config(function($routeProvider) {
        $routeProvider
            .when('/test', {templateUrl: 'test.html', controller: function() {
                console.log('On /test.');
            }})
            .when('/', {templateUrl: 'main.html', controller: 'MyTestCtrl'})
            .otherwise('/');
    })
    .controller('MyTestCtrl', function ($scope) {
        self = $scope;
        self.val = 'TeSt';
        self.counter = 0;
        var self = self;
        self.clicked = function() {
            self.counter++;
        };
    });

Wenn ich express.static mit HTML5-Modus in Eckigen, bekomme ich die Fehlermeldung Cannot GET [path to page] nach dem aktualisieren oder die manuelle Eingabe einer URL. Wenn ich die # zurück zu der URL, kann ich die Seite anzuzeigen und die mit der # - entfernt wurden.
Können Sie ein Beispiel nennen?
Sind Sie mir sagen, Sie wissen sicher, dass .use(express.static( indexPath )) HTML5 unterstützt? Weil es offenbar nicht. Es funktioniert, bis ich auf aktualisieren, dann sagt er Cannot GET /home/splash. Wenn ich die # zurück in der URL, lädt und entfernt die #, aber erfrischende wieder gibt die Fehlermeldung wieder.
Ich habe angefügt ein Beispiel oben.
Ich habe ein Beispiel für mich selbst. Überprüfen Sie bitte mein update auf die Antwort. Ich hoffe, es klärt etwas für Euch 🙂
Ich denke, das Problem war, dass ich nicht .use(express.static('public')) erste, lege ich immer letzten.
Ich habe einen Fehler gefunden im code. <a href="/test/ "Titel">testen Sie mich!</a> Ändern der router zum behandeln der oben genannten link: .wenn('/test/Titel', ........ Eine unendliche Schleife verursachen. Sie können es sehen, wenn man sich die Ausgabe in der Konsole.

InformationsquelleAutor Jonas

5

statt:
```
router.get( '/*', function( req, res ) {
    express.static( indexPath )
})
```
tun
```
router.get( '/:anyreq', function( req, res ) {
    express.static( indexPath )
})
```
halten Sie es einfach am Ende der Routen-Datei.
- Ich bekomme Cannot GET /home/login bei der Verwendung einer Pfad-und Cannot GET / bei Verwendung eines # im Weg.
InformationsquelleAutor Paweł Smołka
0

Wie es scheint, gibt es möglicherweise ein problem mit der AJAX-Anfragen.

Ich in der Regel meine Routen so:

app.use(express.static(path.join(__dirname, "./public"))); app.use("/", require(path.join(__dirname, "./routes")));

machen und Anrufe auf dem front-end mit
templateUrl: "/templates/home.html" in einer Richtlinie

oder $http.get("/images").success(...).error(...) mit $http.

In der templateUrl Fall die app, wechseln Sie in das öffentliche Verzeichnis, dann wird der Pfad-Vorlagen und dienen der html-Datei.
In der $http Fall bin ich die Angabe einer route, sodass die app prüft die öffentlichen Verzeichnis nicht zu sehen ein Bilder-Pfad und so bewegt Sie sich auf dem router. Im router habe ich eine
router.get("/images", function (req, res, next) { res.sendFile(...); oder res.send({(data)}) }) sendet die Datei, die ich brauche, zurück zu dem vorderen Ende, wo ist es gefangen in der Erfolgs-handler.
- Ich bin mit $http auf dem front-end und erklärt die templateUrl wie Sie erklären. Verwenden Sie html5Mode? Können Sie bestätigen, es funktioniert mit Express?
- Ich bin mit Winkel-und express-mit diesem set-up. In der statischen router müssen Sie den relativen Pfad (also path.join(__dirname, "public"))
InformationsquelleAutor Isaac Madwed

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.