CODEWITHSUNDEEP
angularjsnode.js
Zichen Ma
Zichen Ma

Reputation: 987

AngularJS HTML templates are routing failed in Nodejs/Expressjs

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: enter image description here

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

enter image description here

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!

Upvotes: 0

Views: 444

Answers (2)

abdulbari
abdulbari

Reputation: 6232

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

Upvotes: 1

BigBadBigBad
BigBadBigBad

Reputation: 461

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.

Upvotes: 0

Related Questions