Javascript HTML5模式下带Node.js的角度路由_Javascript_Angularjs_Node.js_Express_Angular Ui Router

Javascript HTML5模式下带Node.js的角度路由

javascript angularjs node.js express

Javascript HTML5模式下带Node.js的角度路由,javascript,angularjs,node.js,express,angular-ui-router,Javascript,Angularjs,Node.js,Express,Angular Ui Router,我知道还有其他的答案，但他们似乎有警告，这对于我使用Mixpanel的前端应用程序来说可能是致命的，并且在浏览器中，双重加载Mixpanel将导致最大调用堆栈大小超过错误我个人无法去工作。为了诊断这个问题，建议我使用express.static（）当前我的代码如下所示： |- index.js |- public/ |---- index.html |---- test.html |---- main.js |---- angular.js |---- angular-route.js

我知道还有其他的答案，但他们似乎有警告

，这对于我使用Mixpanel的前端应用程序来说可能是致命的，并且在浏览器中，双重加载Mixpanel将导致最大调用堆栈大小超过错误

我个人无法去工作。为了诊断这个问题，建议我使用

express.static（）

当前我的代码如下所示：

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

home.js-一些路线，最后一条是前端站点

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-配置节点/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 )
    })

更多信息

您可以看到我试图使用

express.static（）

的原因是，当我使用

res.sendfile（）

时，控制台显示

意外令牌“时，您可能使用了错误的express中间件。查看示例，可以告诉我以下代码
.use( '/images', express.static( indexPath + '/images' ) )

为文件夹indepath+'/images'
下的任何文件提供以下URL：
http://localhost:3000/images/kitten.jpg
http://localhost:3000/images/logo.png
http://localhost:3000/images/whatever.jpg

这就是你所期望的吗
我的建议是从
.use( '/', require( './routes/home' ) )

到
因为根据文档，它将从根路径aka为indepath
文件夹下的所有静态文件提供服务。没有前缀
我想这就是我能为你提供的所有信息。如果这不起作用，也许你可以分享一些小的代码示例，我可以用它们自己复制
更新
嗯。我试图创建一个简单的例子。我用下面的方法使它工作。
我的目录结构如下：
|- index.js
|- public/
|---- index.html
|---- test.html
|---- main.js
|---- angular.js
|---- angular-route.js

index.js
是节点服务器。注意布线的顺序。我还添加了一些/home/login
示例，以明确如何添加不应通过的其他服务器路由
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
非常简单
<!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>

test.html
实际上是不相关的
<div>
    <h4>What a beautiful day to test HTML5</h4>
</div>

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

做
只需将其保留在路由文件的末尾。
您的AJAX请求似乎有问题。

我通常会这样设置我的路线：
|- index.js
|- public/
|---- index.html
|---- test.html
|---- main.js
|---- angular.js
|---- angular-route.js

app.use（express.static（path.join（uu dirname，“/public”））；
app.use（“/”，require（path.join（uu dirname，“./routes”））
并在前端使用
templateUrl:“/templates/home.html”
在指令中
或者$http.get（“/images”）.success（…）.error（…）
使用$http
在templateUrl的情况下，应用程序将进入公共目录，然后是路径模板并提供html文件。
在$http的情况下，我指定了一个路由，这样应用程序就会检查公共目录，看不到图像路径，然后转到路由器。在路由器里我有一个
router.get（“/images”，函数（req，res，next）{res.sendFile（…）；
或res.send（{（data）}）}）
将我需要的文件发送回前端，在成功处理程序中捕捉到该文件。
我如何为此添加奖励？已经4天了……我不是express的专家，但我从来没有看到任何人在按照中的示例操作时出错，这表明使用app.all
而不是router.get
。是否检查传递到express.static
的路径有效？indepath
的值是多少？只需使var app=express（）；app.configure（function（）{…app.use（express.static（uu dirname+'/public'））；…}@PawełSmołka我不认为app.configure是express 4的一部分。当我在角度模式下对HTML5使用express.static
时，我会得到错误无法获取[页面路径]
刷新或手动输入URL后。如果我将#
添加回URL，我可以查看页面，#将被删除。@Noah，你能创建一个示例吗？你是说你肯定知道.use（express.static（indexPath））
支持HTML5？因为它似乎不支持HTML5。它一直工作到我点击“刷新”，然后它说无法获取/home/splash
。如果我将
放回URL，它会加载并删除
，但再次刷新会再次出现错误。我在上面添加了一个示例。我认为问题是我没有将放回URL。请使用（express.static（'public'））
首先，我总是把它放在最后。我在使用路径时获取无法获取/home/login
，在路径中使用
时获取无法获取
。我在前端使用$http
，并声明模板URL
，如您所解释。您是否使用HTML5模式
？您能确认它在Express中有效吗？我使用angular和express进行设置。在静态路由器中，您需要提供相对路径（即path.join（\uu dirname，“public”））
<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>

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

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++;
        };
    });

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

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