AngularJS HTML templates are routing failed in Nodejs/Expressjs

Question

I am working on a small AngularJS project. I used ui-router to route different html templates which works fine. The code and folder structure shows as below:

var app = angular.module('flapperNews', ['ui.router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('news', {
          url: '/news',
          templateUrl: 'news.html',
          controller: 'MainCtrl'
      })
    .state('posts', {
        url: '/posts/{id}',
        templateUrl: 'posts.html',
        controller: 'PostsCtrl'
    });

    $urlRouterProvider.otherwise('news');
}]);

Folder Structure:

However, when I tried to install them into the Nodejs/Expressjs, it shows the error: GET http://localhost:3000/news.html 404 (Not Found)

I have already put all html templates into the views folder shows as below, but doesn't work. I am new to NodeJS, anyone knows what happened? Thank you so much in advance!

Can you show your `app.js` file? in which folder all you `html` files exists? — abdulbarik, Sep 04 '16 at 20:00

score 1 · Accepted Answer · edited May 23 '17 at 10:29

1

Put all your HTML files in public folder and access all from there. Since Angular unable to get that pages from views folder since it's server side stuff. Putting HTML files in public folder is not a standard but it's mostly used while using Angular

You can get more ideas from here with Jess answer

edited May 23 '17 at 10:29

Community

1
1

answered Sep 04 '16 at 20:15

abdulbarik

6,101
5
38
59

Thank you so much! It works! I created a new folder named templates under the public folder and changed the path in angularApp to:templateUrl: '/templates/news.html' It worked. – Zichen Ma Sep 05 '16 at 15:45
Glad to help you :) – abdulbarik Sep 05 '16 at 15:47
Thank you @abdulbarik Like you said, eventually, I created a new folder named: templates under the public folder and put all my html templates into that folder, changed the angular path to templateUrl: '/templates/news.html' Finally, it worked! – Zichen Ma Sep 05 '16 at 15:51
@abdulbarik it was a opposite case for me. My html files were inside public/templates/ and my routing was not working properly but when i moved my html files to root/views/ it started working perfectly. – node_saini Jun 02 '17 at 14:18

BigBadBigBad · Answer 2 · 2016-09-04T20:24:47.237

0

I think you just need /views/home.html in your templateUrl: and the views folder should be inside your public directory.

I assume you have something close to app.use(express.static(path.join(__dirname, 'public'))); somewhere? This is setting you up to display static files from within the public directory.

edited Sep 04 '16 at 20:24

answered Sep 04 '16 at 19:54

BigBadBigBad

421
5
9

thank you so much! The logic is correct, but after I moved views folder to public folder, it give me error: Error: Failed to lookup view "error" in views directory ". Eventually, I created a new folder named: templates under the public folder and put all my html templates into that folder, changed the angular path to templateUrl: '/templates/news.html' Finally, it worked! Thank you so much! – Zichen Ma Sep 05 '16 at 15:50

AngularJS HTML templates are routing failed in Nodejs/Expressjs

2 Answers2