Angular Ui-Router не маршрутизируется при использовании node.js

Я использую маршрутизатор angular ui. Маршрутизатор, кажется, отлично работает на домашней странице index.html. Но никакая другая навигация не работает.

Вот мой stateprovider угловой:

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 в моем основном index.html:

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

Когда я перехожу по странице localhost:8080/login, я получаю следующее:

введите описание изображения здесь Я думаю, что даже не должен видеть эту страницу, если он не может ее найти. Разве это не должно перенаправить меня обратно на «/» из-за $urlRouterProvider.otherwise(). Помимо этого, хотя URL-адрес шаблона /partials/account/login.html существует.

Я новичок в node.js, и мне любопытно, пытается ли файловый сервер заметок маршрутизировать и превосходить мой угловой? Я использую http-сервер, который, вероятно, является наиболее распространенным.

Я также использую Express Node, если это помогает. И вот код для app.js, где, я думаю, может возникнуть проблема:

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;

node.js angularjs angular-routing

allencoded 06.06.2014 источник

Ответы (3)

arrow_upward
4
arrow_downward

Я понял. Выполнение ниже заставило это работать.

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.js, если кому интересно, куда он делся.

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;

Конечно, это должно быть в вашем угловом коде:

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

Одна вещь, чтобы отметить, что получил меня. Вы должны перезапустить сервер, чтобы это работало. ctr+c, затем вставьте этот код и перезапустите сервер. Удачи

allencoded 06.06.2014

comment

Что вы делали, чтобы ваши маршруты на стороне сервера внутри папки маршрутов переходили на другие страницы, например «/ логин» или «/ регистр»? - Mark A; 27.04.2016

arrow_upward
1
arrow_downward

пробовали ли вы использовать один и тот же каталог для своих партиалов:
перемещение партиалов/account/login.html" в partials/home/login.html"
Кроме того, вы используете свой собственный сервер. js экспресс-конфигурация или полный стек йомена?
angular явно обрабатывает маршрутизацию, но кажется, что nodejs не находит активы...

Убедитесь, что у вас есть конкретная задача для обслуживания частичных файлов в вашем 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);

для вашего случая это может быть что-то вроде:

    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;

Mahmal Sami 06.06.2014

comment

Я использую экспресс-конфигурацию узла внутри webstorm. - allencoded; 06.06.2014

comment

Как вы используете реализацию файла server.js. Можете ли вы опубликовать метод, обслуживающий ваши статические файлы? - Mahmal Sami; 06.06.2014

comment

Хорошо, попытался переместить partials/account/login.html в partials/home/login.html, но проблема осталась. /логин не найден. - allencoded; 06.06.2014

comment

прямо сейчас я просто использую команду узла http-server, чтобы запустить его. вообще не трогал стандартные вещи - allencoded; 06.06.2014

comment

Можете ли вы попробовать добавить 'app.get('/partials/*', serve_partial);' как объяснил ;) - Mahmal Sami; 06.06.2014

comment

во-первых, у меня нет файла server.js, который я вижу. Я попытался добавить код, который вы указали выше, но это не сработало. хотя продолжу попытки - allencoded; 06.06.2014

comment

в вашем случае это ваш файл app.js, который вы добавили в свой первый пост. - Mahmal Sami; 06.06.2014

comment

да, я только что попробовал это в app.js, на самом деле я скопировал и вставил весь ваш код в app.js, и все равно безрезультатно. - allencoded; 06.06.2014

arrow_upward
0
arrow_downward

Как я вижу, вы запрашиваете API-интерфейс своего узла, для которого нет маршрута, такого как /login, и вы получаете 404.

Вы должны попробовать localhost:8080/#/login

Burhan 06.06.2014

comment

Это работает... вопрос, как это исправить, чтобы я мог использовать $locationProvider.html5Mode(true)? - allencoded; 06.06.2014

Angular Ui-Router не маршрутизируется при использовании node.js

Ответы (3)

Похожие вопросы