Angular-Ui-Router ist nicht routing während der Verwendung node.js

Ich bin mit angular ui router. Der router scheint zu funktionieren perfekt auf der Startseite index.html. Aber andere navigation nicht funktioniert.

Hier ist mein stateprovider Winkel:

var app = angular.module('myApp', ['ui.router']);


app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state("home", {
            url: "/",
            templateUrl: "../partials/home/index.html"
        })
        .state("login", {
            url:"/login",
            templateUrl: "../partials/account/login.html"
        })
        .state("register", {
            url: "/register",
            templateUrl: "../partials/account/register.html"
        })
        .state("values", {
            url: "/values",
            templateUrl: "../partials/test/values.html"
        })
    ;
});

HTML-Code in meine main index.html:

 <!--Content -->
    <div class="container">
        <div ui-view></div>
    </div>
    <!-- END Content -->

Wenn ich navigieren, die die Seite localhost:8080/login bekomme ich diese:

Angular-Ui-Router ist nicht routing während der Verwendung node.js
Ich würde denken, ich sollte nicht sogar sein, sehen Sie diese Seite, wenn Sie es nicht finden können. Sollte es nicht umleiten, mich wieder zu "/" weil der $urlRouterProvider.sonst(). Neben diesem Punkt, obwohl die Vorlagen-url /partials/account/login.html Existiert.

Ich bin etwas neu auf node.js und ich bin gespannt, ob der Hinweis Datei-server versucht zu route und trumpfen mein Winkel ein? Ich bin mit http-server, die wahrscheinlich die meisten common one.

Ich bin auch mit Express-Knoten, falls das hilft. Und hier ist der code für app.js wo ich denke, das problem kann aus:

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

///catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

///error handlers

//development error handler
//will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

//production error handler
//no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;
InformationsquelleAutor allencoded | 2014-06-06
  1. 4

    Habe ich es herausgefunden. Tun Sie das unten machte es Arbeit.

    app.use(function(req, res) {
    //Use res.sendfile, as it streams instead of reading the file into memory.
    res.sendfile(__dirname + '/public/index.html');
});

    Den gesamten app.js falls jemand neugierig ist, wo es geht. 

    var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');

var app = express();

//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


app.use(function(req, res) {
    //Use res.sendfile, as it streams instead of reading the file into memory.
    res.sendfile(__dirname + '/public/index.html');
});

app.use('/', routes);



///catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

///error handlers

//development error handler
//will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

//production error handler
//no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

    Natürlich müssen Sie in Ihre Winkel-code:

    app.config(["$locationProvider", function($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

    Eine Sache zu beachten, dass got me. Sie müssen den server neu starten, damit das funktioniert. ctr+c und fügen Sie dann diesen code dann neu starten, server. Viel Glück

    • Was tun Sie für Ihre server-side-Routen innerhalb Ihres Routen-Ordner zu gehen zu anderen Seiten, wie z.B. '/login' oder '/register'?
    InformationsquelleAutor allencoded
  2. 1

    haben Sie versucht, mit dem gleichen Verzeichnis für Ihre partials :

    verschieben partials/account/login.html" zu partials/home/login.html"

    Außerdem sind Sie mit Ihrer eigenen server.js express-Konfiguration, oder ein yeoman fullstack ?

    eckig ist klar Umgang mit dem routing, aber es scheint, dass nodejs ist nicht zu finden, das Vermögen...

    Sicher sein, eine bestimmte Aufgabe für das servieren von partial-Dateien in Ihrem server.js

        function serve_partial(req,res){
      var stripped = req.url.split('.')[0];
      var requestedView = path.join('./', stripped);
      res.render(requestedView, function(err, html) {
        if(err) {
          res.render('404');
        } else {
          res.send(html);
        }
      });
    }

    function serve_index(req,res){
      res.render('index');
    }

    //Angular Routes
    app.get('/partials/*', serve_partial);
    app.get('/*', serve_index);

    für Ihren Fall, es könnte mir etwas wie :

        var express = require('express');
    var path = require('path');
    var favicon = require('static-favicon');
    var logger = require('morgan');
    var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');

    var routes = require('./routes/index');
    var users = require('./routes/users');

    var app = express();

    //view engine setup
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');

    app.use(favicon());
    app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded());
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'public')));

    function serve_partial(req,res){
      var stripped = req.url.split('.')[0];
      var requestedView = path.join('./', stripped);
      res.render(requestedView, function(err, html) {
        if(err) {
          res.render('404');
        } else {
          res.send(html);
        }
      });
    }

    app.use('/partials/*', serve_partial);
    app.use('/', routes);
    app.use('/users', users);

    ///catch 404 and forward to error handler
    app.use(function(req, res, next) {
        var err = new Error('Not Found');
        err.status = 404;
        next(err);
    });

    ///error handlers

    //development error handler
    //will print stacktrace
    if (app.get('env') === 'development') {
        app.use(function(err, req, res, next) {
            res.status(err.status || 500);
            res.render('error', {
                message: err.message,
                error: err
            });
        });
    }

    //production error handler
    //no stacktraces leaked to user
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: {}
        });
    });


    module.exports = app;
    • Ich bin mit der express-Knoten-Konfiguration innerhalb von webstorm
    • Wie sind Sie mit der Umsetzung Ihrer server.js Datei. Können Sie publicate der Methode dienen Ihrer statischen Dateien ?
    • Okay versuchte verschieben partials/account/login.html zu partials/home/login.html und immer noch das gleiche problem. /login nicht gefunden.
    • jetzt habe ich nur mit dem node-Befehl http-server, um Sie zu starten. nicht berührt haben die Standard-Kram überhaupt
    • Können Sie versuchen, hinzufügen von 'app.get('/partials/*', serve_partial);' als erklärt 😉
    • zunächst habe ich nicht einen server.js die Datei, die ich sehen kann. Ich habe versucht, das hinzufügen der code, den Sie haben oben aber es hat nicht funktioniert. werde auch weiterhin versuchen, obwohl
    • in Ihrem Fall ist es Ihre app.js hinzugefügte Datei in deinem ersten post
    • ja, ich habe gerade versucht es in die app.js in der Tat habe ich kopiert und eingefügt, Ihren gesamten code in app.js und immer noch kein Erfolg.

    InformationsquelleAutor SamiX
  3. 0

    Als ich sehe, Sie verlangen, um Ihren Knoten-api, die gibt es nicht irgendeine route wie /login und Sie erhalten 404.

    Sollten Sie versuchen localhost:8080/#/login

    • Das funktioniert...Frage wie es so fix, dass ich tun kann, $locationProvider.html5Mode(true)?
    InformationsquelleAutor Burhan
Schreibe einen Kommentar