angularjs - 未在jade中加载js/css文件

Question

我对jade很陌生，在我的node.js项目中，没有加载js和css外部文件。我使用jade作为模板引擎，bower_component，angular.js作为javascript mvc，bootstrap作为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文件中::

 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

看起来你应该尝试一下:

 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')