没有在jade中加载js / css文件

Question

我是 jade 的新手，在我的 node.js 项目中，没有加载js和css外部文件。我使用 jade 作为模板引擎， bower_component ， angular.js 作为javascript mvc， bootstrap < / strong>用于css框架， Cloud9 作为编辑器。我的代码如下：

我的项目结构::

 -jobproject
 |----node_modules
        |-- bower
        |-- express
        |-- jade

 |---public
        |--- app
              |-- app.js
        |--- bower_components
              |-- angular
                    |-- angular.js
              |-- bootstrap
                    |-- dist/css/bootstrap.min.css
              |-- jquery
 |-bower.json
 |-index.jade
 |-package.json
 |-README.md
 |-server.js

在 server.js file ::

中

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

 app.set('views', __dirname);
 app.set('view engine', 'jade');  // jade view engine

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

 app.get('*', function(req, res) {
    res.render('index.jade');
 });

 app.listen(process.env.PORT, process.env.IP); // default cloud9 port 

在 index.jade ::

中

 link(rel="stylesheet", href="bower_conponents/bootstrap/dist/css/bootstrap.min.css")

 script(type='text/javascript', src='bower_conponents/angular/angular.js')
 script(type='text/javascript', src='/app/app.js')

 body(ng-app='app')
    div(ng-controller='testCtrl')
       div {{ test }}

       span(class='btn btn-primary') hello world

在 app.js ::

中

 angular.module('app', []);

 angular.module('app').controller('testCtrl', function($scope) {
    $scope.test = 'working';
 })

在浏览器窗口中：

 {{ test }} <!-- should be "working"
 hello world <!-- show be bootstrap button style, but only plain text -->

在控制台窗口中：

angular.js:1 Uncaught SyntaxError: Unexpected token <
app.js:1 Uncaught ReferenceError: angular is not defined

Answer 1

可能是错字错误。 Bower_components？

Answer 2

看起来你应该尝试：

 link(rel="stylesheet", href="bower_components/bootstrap/dist/css/bootstrap.min.css")
 script(type='text/javascript', src='bower_components/angular/angular.js')

而不是：

link(rel="stylesheet", href="bower_conponents/bootstrap/dist/css/bootstrap.min.css")

script(type='text/javascript', src='bower_conponents/angular/angular.js')

Answer 3

如果您按照正在使用的教程使用heroku，请确保在尝试查看更改之前添加文件并提交它们并推送到heroku。