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

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

Вот мой государственный поставщик угловых:

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;
7 голосов | спросил allencoded 6 J0000006Europe/Moscow 2014, 04:41:25

3 ответа


0

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

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 6 J0000006Europe/Moscow 2014, 07:42:09
0



Вы пытались использовать один и тот же каталог для своих частичек:
перемещение partials /account /login.html "в partials /home /login.html"
Кроме того, вы используете собственную экспресс-конфигурацию server.js или полноценный стек yeoman?
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;
ответил SamiX 6 J0000006Europe/Moscow 2014, 04:49:01
0

Как я вижу, вы запрашиваете у вашего api узла, что нет никакого маршрута, например /login, и вы получаете 404.

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

ответил Burhan 6 J0000006Europe/Moscow 2014, 06:59:36

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

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132