I am pretty new in jade, in my node.js project, no js and css external file is being loaded. I am using jade as template engine, bower_component, angular.js as javascript mvc, bootstrap for css framework and Cloud9 as editor. My code is given below :
My Project Structure::
-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
In 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
In 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
In app.js ::
angular.module('app', []);
angular.module('app').controller('testCtrl', function($scope) {
$scope.test = 'working';
})
In the browser window :
{{ test }} <!-- should be "working"
hello world <!-- show be bootstrap button style, but only plain text -->
In console window :
angular.js:1 Uncaught SyntaxError: Unexpected token <
app.js:1 Uncaught ReferenceError: angular is not defined
Looks you should try :
link(rel="stylesheet", href="bower_components/bootstrap/dist/css/bootstrap.min.css")
script(type='text/javascript', src='bower_components/angular/angular.js')
Instead of :
link(rel="stylesheet", href="bower_conponents/bootstrap/dist/css/bootstrap.min.css")
script(type='text/javascript', src='bower_conponents/angular/angular.js')