角色模板组件与Express JS

我想在我的文件夹中的一个角度加载模板文件&我已经用Express静态地调用了我的JS文件。出于某种原因，我的模板文件将不会加载。我已经尝试将它们放在我的视图文件夹和我的index.html文件中（因为它们是相对于.html文件调用的），以及它们自己的文件夹，并使路径与静态调用/ js时相同。我应该怎么做，以覆盖与我的角度模板加载路线的快速路线？角色模板组件与Express JS

IE中：templateUrl： '/latest-purchases/latest-purchases.template.html'， & templateUrl： '最新-purcahses.template.html'，//当它是在同一个文件夹的索引。 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>

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

最新-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

来源

2016-06-23 Dave Boz

我中的index.html移动到/客户端和在server.js，在self.initializeServer =函数（）我拨打：

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

来源

2016-06-23 15:04:04 Gregori

嘿格雷戈里！这工作表示感谢。我也忘了添加到我的结尾组件名称，所以这是一个问题。谢谢！ –

角色模板组件与Express JS

回答

相关问题