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? — abdulbari
– abdulbari, Commented Sep 4, 2016 at 20:00

Community · Accepted Answer · 2017-05-23 10:29:12Z

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, 2017 at 10:29

CommunityBot

11 silver badge

answered Sep 4, 2016 at 20:15

abdulbari

6,2625 gold badges41 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zichen Ma Over a year ago

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.

abdulbari Over a year ago

Glad to help you :)

Zichen Ma Over a year ago

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!

node_saini Over a year ago

@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.

BigBadBigBad · Accepted Answer · 2016-09-04 20:24:47Z

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 4, 2016 at 20:24

answered Sep 4, 2016 at 19:54

BigBadBigBad

4615 silver badges9 bronze badges

1 Comment

Zichen Ma Over a year ago

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!

Collectives™ on Stack Overflow

AngularJS HTML templates are routing failed in Nodejs/Expressjs

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related