AngularJS RouteProvider 和 ExpressJS 发送文件答案

【问题标题】：AngularJS RouteProvider and ExpressJS sendfileAngularJS RouteProvider 和 ExpressJS 发送文件
【发布时间】：2014-05-30 21:21:44
【问题描述】：

在我的 Angular 应用程序中，我尝试渲染在用户单击链接时加载到索引页面中的部分内容。之前使用以下代码运行良好：

//app.js in Angular
angular.module('myApp', [
  'ngSanitize',
  'ngRoute',
  ...
]).
config(['$routeProvider', '$locationProvider', '$sceDelegateProvider', function($routeProvider, $locationProvider, $sceDelegateProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainController'});
  $routeProvider.when('/File/:fileID', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
  $routeProvider.otherwise({redirectTo: '/view1'});
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.url.com/**']);
  $locationProvider.html5Mode(true);
}]);

但是当我添加 Express 时，它不起作用：

var express = require("express");
var logfmt = require("logfmt");
var app = express();

app.use(logfmt.requestLogger());

app.use(express.static(__dirname + '/app'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));

app.get('*', function(req, res) {
  res.sendfile('./app/index.html');
});

如果我只想显示索引页面，这很好用。但是，当我添加以下代码时，它会显示纯 HTML（部分的），但没有 CSS 或 Javascript。

app.get('/partials/currentFile.html', function(req, res) {
    res.render('./app/partials/currentFile.html');
});

如何以适用于 Angular 的方式使用 Express 渲染部分？我试过查看 get()、render 和 sendfile 的 Express api，但它们在我的情况下并没有太大帮助。其他用户之前在这里问过类似的问题，但他们通常涉及 Express 路由到的另一个文件，我想知道我是否可以在不添加任何额外文件的情况下做到这一点，因为仅添加一个文件来包含 Express 已经是一个问题。

currentFile.html 本身不加载任何 CSS 或 Javascript。在我添加 Express 之前，它是一个在 index.html 中加载的部分，它加载了所有额外内容。

感谢任何帮助。谢谢

【问题讨论】：

您这样做是为了解决什么问题？
当我尝试单击应该呈现部分的链接时，它不会呈现它。它只是重新加载索引页面，我想知道如何使它工作。
这可能是一个长镜头，但我认为这是因为你没有根植你的 templateUrl 属性：partial/currentPage.html 在你的应用配置中应该是/partial/currentPage.html。对我来说，您的快速配置看起来应该可以在没有您尝试实施的修复的情况下工作。

标签： angularjs express routing sendfile route-provider

【解决方案1】：

我没有直接解决这个问题，但我解决了这个问题。问题是我想将部分渲染到索引页面上。该应用程序的总体目标是单页应用程序，因此最终只需要一个页面即可。

如果有不同的部分来渲染以进行测试会很好，但可惜似乎没有人知道我在问什么，或者我正在使问题复杂化。无论哪种方式，我都找到了一种解决方法，只需摆脱所有其他部分并将所有 URL 请求重定向到单页应用程序。

config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainVideoController'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.when('/file', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
  $routeProvider.otherwise({redirectTo: '/file'});
...

请注意，在尝试访问 domain.com/view1 或 /view2 时，部分 view1 和 view2 不起作用。

【讨论】：