Render html with node.js

Question

I am really new to the whole MEAN-stack and are trying to create an application on openshift but are unable to render a new page.

I just keep getting this error and can't solve it with anything I've googled.

My Error: Failed to lookup view "/register" in public directory

It works completely fine to render the index page with app.get('/', func()) in server.js and tried to to the exact same thing with app.get('/register). I used to have the same problem with '/' at first but solved it using app.use(express.static(__dirname + '/public'));

Both index.html and register.html are located in the public directory.

These are extracts of my code:

index.html

<body ng-app="">
    <div class="container" ng-controller="LoginController" >
        <h1>Logg in</h1>
        <input class="form-control" placeholder="ID"/>
        <input class="form-control" placeholder="Password"/>
        <button class="btn">Logga in</button>
        <button ng-click="open()" class="btn">Register User</button>
    </div>
</body>

logincontroller

function LoginController($scope, $http) {
console.log("Hello from Login");

    $scope.open = function () {
        console.log('open i login.js');
        $http.get('/register')
    };
};

server.js

var express = require('express');
var fs      = require('fs');
var mongojs = require('mongojs');
var jade = require('jade')

var app = express();
var cors = require('cors');
var bodyParser = require('body-parser');

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

app.get('/env',function(req, res){
    res.json(process.env);
});

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

app.get('/register', function (req, res) {
    res.render('/register');
});

app.set('view engine', 'jade');

Answer 1

There are a couple of issues.

1) Don't use a slash for the 'register' file. This is a file in the /public folder, not a folder or route.

app.get('/register', function (req, res) {
    res.render('register');
});

2) You have set jade as your rendering engine. This means you will be serving .jade files. Your public folder should have index.jade . And it should look like this:

html
  body(ng-app='')
    .container(ng-controller='LoginController')
      h1 Logg in
      input.form-control(placeholder='ID')
      input.form-control(placeholder='Password')
      button.btn Logga in
      button.btn(ng-click='open()') Register User

A couple of notes:

Jade is a HTML templating engine, it's relatively straight forward, see http://jade-lang.com/tutorial/ .
There is express-generator which will give you an example app, it's an excellent starting point: http://expressjs.com/en/starter/generator.html
By the way, there is also an HTML-2-Jade converter, I find this helpful sometimes: http://html2jade.org/

Render html with node.js

Question

1 answers

solution1
2 ACCPTED 2016-04-27 10:29:53

Render html with node.js

Question

1 answers

solution1 2 ACCPTED 2016-04-27 10:29:53

solution1
2 ACCPTED 2016-04-27 10:29:53