带有 Express JS 的 Angular 模板组件答案

【问题标题】：Angular Template Component With Express JS带有 Express JS 的 Angular 模板组件
【发布时间】：2016-06-23 14:43:47
【问题描述】：

我正在尝试在 Angular 中的一个文件夹中加载模板文件，并且我已经在使用 Express 静态调用我的 JS 文件。出于某种原因，我的模板文件不会加载。我已经尝试将它们与我的 index.html 文件一起放入我的视图文件夹中（因为它们被称为相对于 .html 文件），以及它们自己的文件夹，并使路径与静态调用 /js 时的路径相同。我应该怎么做才能用我的角度模板加载路线覆盖 Express 路线？

即：templateUrl: '/latest-purchases/latest-purchases.template.html', & templateUrl: 'latest-purcahses.template.html', //当和index.html在同一个文件夹时，都不会加载。

表达 JS 文件

var express     = require('express'),
app             = express(),
mongoose        = require('mongoose'),
bodyParser      = require('body-parser'),
path            = require('path');

//Connect Mongoose DB To Database
mongoose.connect('mongodb://localhost:27017/finance');

app.use(bodyParser.urlencoded({
    extended: true
}));

app.use(bodyParser.json());

//Use pathjoin: takes care of unecessary delimiters(occurence: pathes from unknown sources)
//i.e.,: 'a','/b' or '/a','b' or 'a','b' etc...
app.use('/bower_components', express.static(path.join(__dirname, '/bower_components')));

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

app.get('/', function(request, response){
    response.sendFile(__dirname + '/client/views/index.html');
}); 

app.listen(3000, function() {
    console.log("Listening on 3000...");
});

index.html

  <body ng-app="financeApp>

    <div>
        <latest-purchase></latest-purchase>
    </div>

    <!-- Keep @ Bottom For Better Load Times -->
    <script src="/bower_components/angular/angular.js"></script>
    <script type="text/javascript" src="/js/app.module.js"></script>
    <script type="text/javascript" src="/js/latest-purchases/latest-purchases.module.js"></script>
    <script type="text/javascript" src="/js/latest-purchases/latest-purchases.component.js"></script>
   </body>
 </html>

latest-purchases.component.js

angular.
  module('latestPurchases').
  component('latestPurchases', {
   templateUrl: 'latest-purchases.template.html',
    controller: function latestPurchaseController() {
      this.purchases = [
         {
          name: 'Television',
          price: 40.00,
          date: 'Septmber 12th, 2014' 
         }, {
          name: 'Skateboard',
          price: 50.00,
          date: 'October 6, 1993'
        }, {
          name: 'iPhone',
          price: 200.99,
          date: 'October 30th, 2014'
        }
      ];
    }
  });

最新购买.template.html

<table>
    <tr>
        <th> Name </th>
        <th> Price </th>
        <th> Date </th>
    </tr>
    <tr ng-repeat="purchase in $ctrl.purchases">
        <td>{{purchase.name}}</td>
        <td>{{purchase.price}}</td>
        <td>{{purchase.date}}</td>
    </tr>
</table>

app.module.js

var app = angular.module('financeApp', [
    'latestPurchases'
]);

目录树：

/app
     /server.js
     /client
        /js
            /latest-purchases
               /latest-purchases.component.js
               /latest-purchases.component.spec.js
               /latest-purchases.template.html.js
               /latest-purchases.module.js
        /views
           /index.html
        /app.module.js

【问题讨论】：

标签： javascript angularjs node.js templates express

【解决方案1】：

我会将 index.html 移动到 /client 并在 server.js 中，在 self.initializeServer = function() 中调用：

self.app.use(express.static('client'));

所以，如果我转到http://127.0.0.1:8080/，它会打开 index.html。要包含来自子文件夹的文件，我使用这个：

<script src="js/latest-purchases/latest-purchases.module.js"></script>

让我们知道。如果这不起作用，我可以为你敲定一个 github。最好的。

【讨论】：

嘿格雷戈里！那行得通，谢谢。我也忘记将 s 添加到我的结尾组件名称中，所以这是一个问题。谢谢！