node.js / angular.js - 无法获取

时间:2013-02-05 04:13:20

标签: node.js angularjs

我有根路线,它工作正常。我还有另一条路线127.0.0.1:3000/dashboard如果我只是在地址栏中输入该网址我收到此错误:

无法获取/仪表板

如果我创建指向同一网址的链接,则可以正常使用。

如果我然后刷新该页面,我会再次收到同样的错误。

以下是我的node.js路线

app.js

/**
* Module dependencies.
 */

var express = require('express')
  , routes  = require('./routes')
  , stats   = require('./routes/stats')
  , tests   = require('./routes/test')
  , http    = require('http')
  , util    = require('util')
  , path    = require('path');

var app = module.exports = express();

app.configure(function(){

  /*
   * Configuration
   *
   */
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');

  /*
   * Middleware definitions
   *
   */
  app.use(express.favicon());
  app.use(express.logger('dev'));
  /*
   * Error handling middleware
   */
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.cookieParser('shhhhhhhh, super secret'));
  app.use(app.router);

  // serves up dynamic css files
  app.use(require('stylus').middleware(__dirname + '/public'));
  app.use(require('less-middleware')({ src: __dirname + '/public' }));

  // serves a static path
  app.use(express.static(path.join(__dirname, 'public')));

});

app.configure('development', function(){
    app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
    app.use(express.errorHandler());
});


/*
 * Endpoints
 */
app.get('/', routes.index);

app.get('/test', tests.get);
app.post('/test', tests.post);
app.options('/test', tests.options);

app.get('/stats/sends', stats.sends.get);
app.get('/stats/events', stats.events.get);
app.get('/stats/attempts', stats.attempts.get);
app.get('/stats/errors', stats.errors.get);
app.get('/stats/mquad', stats.mquad.get);

app.get('/partials/:name', routes.partials);
app.get('/index/landing', routes.landing);
app.get('/index/dashboard', routes.dashboard);

console.log('Env: ' + app.settings.env);
http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

路由/ index.js

    exports.dashboard = function(req, res){
        res.render('dashboard');
    };

角度路线

    'use strict';
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
    config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'partials/landing',
            controller: LandingCtrl
        }).
        when('/dashboard', {
            templateUrl: 'partials/dashboard',
            controller: DashboardCtrl
        }).
        otherwise({
            redirectTo: '/'
        });
    $locationProvider.html5Mode(true);
}]);

4 个答案:

答案 0 :(得分:12)

这不起作用的原因是您的服务器没有捕获所有其他路由并将它们路由到由routes.index提供的单页应用。

为了捕获所有其他路由并将它们路由到索引页面,以便您的角度应用程序可以查看它是否与提供的URL匹配,您需要做的就是在声明最后一个路径后添加以下行:

app.get('*', routes.index);

现在你应该能够:

  • 直接导航到您的Angular.js应用
  • 提供的网址
  • 刷新任何页面而不会出错

答案 1 :(得分:8)

这篇文章可能有所帮助:

http://jjt.io/2013/11/16/angular-html5mode-using-yeoman-generator-angular/

简而言之:

npm install --save-dev connect-modrewrite

Gruntfile:

connect: {
  options: {
    // ...
    // Modrewrite rule, connect.static(path) for each path in target's base
    middleware: function (connect, options) {
      var optBase = (typeof options.base === 'string') ? [options.base] : options.base;
      return [require('connect-modrewrite')(['!(\\..+)$ / [L]'])].concat(
        optBase.map(function(path){ return connect.static(path); }));
    }
  }
}

答案 2 :(得分:4)

路由app.get('/index/dashboard', routes.dashboard);表示http://hostname/index/dashboard,而when('/dashboard', { ... })表示http://hostname/dashboard

您应该更正路线:app.get('/dashboard', routes.dashboard);

答案 3 :(得分:1)

我建议在前端和后端使用相当快的javascript解决方案。

<强>的NodeJS

// set up our one route to the index.html file
    app.get('*', function (req, res){
    res.sendFile(path.join(__dirname+'/public/index.html'));
});

此代码告诉de local / remote服务器哪里是主要的html,所以它可以找到其余的模板。

<强> AngularJs

// If 404 Redirect to home
$routeProvider.otherwise( { redirectTo: '/'} );

这也非常有用,所以永远不要错过页面。