CODEWITHSUNDEEP
javascriptangularjsnode.jsexpress
Dejan.S
Dejan.S

Reputation: 19118

ui route, node, express, 404 html files

I can't figure this out for the life of me. I'm using Node, Express, Angular and ui.route. What I'm trying to accomplish is the following,

I setup the application to use ejs instead of jade (don't know if that matters at all)? The error I'm getting is that it can't find localhost:3000/views/partial-home.html 404, I tried all types of different paths in my routing,

(function(){
   var app = angular.module('routerApp', ['ui.router']);

    app.config(function($stateProvider, $urlRouterProvider) {
          $urlRouterProvider.otherwise('/about');

          $stateProvider
            .state('home-about', {
                url: '/home-about',
                templateUrl: '/views/partial-home.html' 
            })
            .state('about', {

            });
       });
    }());

I do not have anything particular in my app.js file to handle html or in my route/index.js, currently I think it's using the index.ejs as well. What steps am I missing in using html and why could the error be with it not finding the partial-home.html

//routes/index.js
    var express = require('express');
    var router = express.Router();

    /* GET home page. */
    router.get('/', function(req, res, next) {
      res.render('index', { title: 'Express' });
    });

    module.exports = router;

There are posts about this topic but none kinda sums up my two issues with using html files and why the 404. Appreciate all help I can get. Thanks!

Upvotes: 0

Views: 101

Answers (3)

Dejan.S
Dejan.S

Reputation: 19118

I got the solution. It's just one of those gotchas. I was looking into my app.js, I had all the routing correct as Arbel was helping me with.

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

So I was looking though the file and it hit me when I seen this line, right that this is a static resource. 

app.use(express.static(path.join(__dirname, 'public')));

So I put my html files into public/partials and that was it. Now my route look like this

$stateProvider
        .state('home-about', {
            url: '/home-about',
            templateUrl: '/partials/partial-home.html' 
        });

Upvotes: 0

KCFragrance
KCFragrance

Reputation: 158

Hey you can set your app view engine as html such that it can render html file.

var ejs=require("ejs");

app.set('views',//folder path of views);

app.engine('html', ejs.renderFile);

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

Upvotes: 0

Arbel
Arbel

Reputation: 30989

You still need to 'mount' this router to the app.

app.use('/', router);

The router will be relative to the path that you mount it to, in this case the root /. You can mount it to any path and the router will be relative to that path. e.g.

app.use('/bar', router);

And your router 'mini-app' will be invoked when the application gets (or any other HTTP method) /bar/ path.

Upvotes: 1

Related Questions