Question

我有开发角度应用程序的经验，但我是平均堆栈的新手，我正在尝试平均堆栈并运行快速服务器并运行角度站点。我主要针对我的REST api表示，但是想要在服务器的未知URL的情况下指向我的客户端的入口点：server.js：

    // Setup View Engines
app.set('views', path.join(__dirname, 'public'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

// Serve files from your "public" directory
app.use('/public', express.static(path.join(__dirname + 'public')));

// Serve files from your "bower_components" directory
app.use('/bower_components', express.static(path.join(__dirname + '/bower_components')));

// GET index.html route
app.get('/', function(req, res) {
    return res.render('index');
});

我的角度位于公共文件夹中，这是我的index.html文件：

    <!DOCTYPE html>
<html ng-app="havuraApp">
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            main
            <ui-view></ui-view>
        </div>

    </body>

    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="../bower_components/angular-ui-bootstrap/index.js"></script>
    <script src="../bower_components/angular-resource/angular-resource.js"></script>
    <script src="app.js"></script>


    <!--services-->
    <script src="Services/svcModule.js"></script>
    <script src="Services/userSvc.js"></script>
    <!--dashboard-->
    <script src="Views/dashboard/dashboard.module.js"></script>
    <script src="Views/dashboard/config.route.js"></script>
    <script src="Views/dashboard/dashboard.js"></script>
</html>

如果我点击了角度站点index.html，我加载了正确的默认路由页面，但是当我使用快速路由命中它时，它只加载html而不是ui-view部分。

任何帮助将不胜感激。

Answer 1

我认为问题在于你的HTML。您指向未声明为public的node_modules目录。我建议你只使用taskrunner将dist文件复制到你的公共目录，而不是向公众打开node_modules。

Answer 2

快递路线app.route('*')正在向__dirname + '/../Public/index.html'发送所有请求。您需要对请求进行更细致的处理：http://expressjs.com/en/guide/routing.html

Answer 3

我想说，将node_modules目录暴露给您的前端并不是最好的做法。如果您想在客户端代码中使用npm个包，则应该查看Browserify或Webpack。

您需要通过express.static();为Express设置静态文件您还需要清理路线。现在，对Express服务器的每个请求都将提供给index.html。虽然为这条路线定义一个资源会更好。或者，您可以在app.route('*')之前定义所有其他路线，因为Express会根据声明自上而下寻找您的路线。

server.js

var express = require('express');
var app = express();

// define static locations to serve
app.use(express.static(path.join(__dirname + 'public')));
app.use(express.static(path.join(__dirname + 'node_modules')));

// single route for index.html
app.get('/', function(req, res) {
   return res.sendFile('../Public/index.html');
});

app.listen(process.env.PORT || 3000);

module.exports = app;

现在您可以访问静态目录及其内容，而无需在html中指定父目录。

的index.html

<!-- load our dependencies from our static locations -->
<script src="/angular/angular.js"></script>
<script src="/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
<script src="/angular-resource/angular-resource.js"></script>

<小时/>

使用Bower代替NPM作为客户端软件包

我会将这些依赖项从npm个包更改为bower个包。 Bower是一个专门用于客户端软件包的软件包管理器。

// Install bower as a global package
npm install -g bower

// same process type as npm init
// creates a bower.json, very similar to package.json
// and ./bower_components, same concept as node_modules
// in our project directory
bower init 

// save our dependencies to bower.json & ./bower_components
bower install --save angular
bower install --save angular-ui-router
bower install --save angular-boostrap
bower install --save angular-resource

然后，您可以直接从bower_components目录提供Bower依赖项。

app.use(express.static(path.join(__dirname +'bower_components')));

您的index.html仍然与此答案中的上述内容相同。

使用View Engines

您目前使用res.sendFile()返回视图，虽然这样做但它不会利用Express，View Engines中存在的功能。 Express支持模板引擎，如Jade，Handlebars＆amp; EJS。这允许使用res.render()，它使用set引擎呈现所请求的视图。

要使用模板引擎，您需要从npm安装其中一个，我更喜欢ejs，但Jade和Handlebars是更受欢迎的选择。

npm install --save ejs

server.js

// Tell Express to look for Views to render in the `./views` directory
app.set('views', path.join(__dirname + 'views'));

// Set EJS as the View Engine
app.use('view engine', 'ejs');

app.use('/', function(req, res) { 
  res.render('index');
});

将快速路线重定向到角页面

3 个答案:

server.js

的index.html

使用Bower代替NPM作为客户端软件包

使用View Engines

server.js