Express JSを使用した角度テンプレートコンポーネント

私のフォルダのいずれかに角をつけてテンプレートファイルをロードしようとしています&私は既にExpressで静的にJSファイルを呼び出しています。何らかの理由でテンプレートファイルが読み込まれません。私はindex.htmlファイル（.htmlファイルに関連して呼び出されるため）と自分のフォルダをビューフォルダに入れてみました。そして、/ jsが静的に呼び出されたときと同じパスになりました。角度のあるテンプレートロードルートでExpressルートを上書きするにはどうすればよいですか？Express JSを使用した角度テンプレートコンポーネント

すなわち,: 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' 
]);

ディレクトリツリー：私はserver.js /クライアントにし、中のindex.htmlを移動する

/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

、self.initializeServer中=の関数（）I電話：

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

したがって、私がhttp://127.0.0.1:8080/に行くと、index.htmlが開きます。サブフォルダのファイルを含めるには、次のようにします：

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

私たちに知らせてください。それがうまくいかなければ、私はあなたのためにギターを完成させることができます。ベスト。

出典

2016-06-23 15:04:04 Gregori

ちょっとグレゴリ！それは感謝しました。私はまた、私の結末のコンポーネント名にsを追加することを忘れていたので、それは問題でした。ありがとう！ –

Express JSを使用した角度テンプレートコンポーネント

答えて

関連する問題