2014-12-13 110 views
1

我很新,在我的node.js项目中,没有加载js和css外部文件。我使用模板引擎bower_componentangular.js如JavaScript MVC,引导的CSS框架和CLOUD9担任主编。我下面的代码给出:不加载js/css文件中的玉

我的项目结构::

-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 

回答

0

看起来你应该尝试:

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

错字错误可能。鲍尔会员?

0

如果您正在使用的Heroku按照你正在做的教程,一定要添加的文件,并提交他们和推在尝试查看更改之前使用heroku。