Express JS的角度模板組件

Question

我試圖將模板文件加載到Angular的一個文件夾中，並且我已經使用Express靜態調用了我的JS文件。 由於某些原因，我的模板文件無法加載。 我嘗試將它們與index.html文件一起放置在我的views文件夾中（因為它們相對於.html文件被調用），以及它們自己的文件夾，並且使其路徑與靜態調用/ js時相同。 我應該怎么做才能用我的角度模板加載路線覆蓋Express路線？

即：templateUrl：“ / latest-purchases / latest-purchases.template.html”和templateUrl：“ latest-purcahses.template.html”，//與index.html位於同一文件夾中時，兩者都不會噸負荷。

Express 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'
        }
      ];
    }
  });

Latest-purchase.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

Answer 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。 最好。

Express JS的角度模板組件

問題描述

1 個解決方案

解決方案1
1 已采納 2016-06-23 15:04:04

Express JS的角度模板組件

問題描述

1 個解決方案

解決方案1 1 已采納 2016-06-23 15:04:04

解決方案1
1 已采納 2016-06-23 15:04:04