Working with Angular js, Node js server and express js

Question

So, I have a welcome page with sign in button which loads a Modal form built on Angular Js. It works fine when I run the welcome.html page as a standalone page on Google Chrome.

Now, I've created a Express Js framework project and modified the .html to .ejs and added them to views and then started the node server which will load the welcome.ejs page perfectly.

But, When I click on Sign in button, it throws the following error in console..

angular.js:11756 GET http://localhost:3000/views/login-popup.ejs 404 (Not Found)

angular.js:11756 GET http://localhost:3000/views/login-popup.ejs 404 (Not Found)(anonymous function) @ angular.js:11756m @ angular.js:11517g @ angular.js:11227(anonymous function) @ angular.js:15961$eval @ angular.js:17229$digest @ angular.js:17045$apply @ angular.js:17337(anonymous function) @ angular.js:25023Qf @ angular.js:3456d @ angular.js:3444
angular.js:13550 Error: [$compile:tpload] http://errors.angularjs.org/1.5.5/$compile/tpload?p0=%2Fviews%2Flogin-popup.ejs&p1=404&p2=Not%20Found
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:156:158
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:130:226
    at n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:144:467)
    at n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:142:47)
    at n.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:145:249)
    at l (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:97:55)
    at H (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:101:190)
    at XMLHttpRequest.u.onload (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:102:229)

This is how my Angular will load the Modal

app.controller('LoginController',['$scope','$uibModal', function($scope,$uibModal){
        $scope.name = 'a100';
        $scope.loginModal = function(){
            var modalInstance = $uibModal.open({
                  animation: 'true',
                  templateUrl: '/views/login-popup.ejs',
                  controller: 'LoginModalController'
            });
        };
}]);

Node Code:

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

var server = app.listen(3000);
console.log("Server Started at port 3000");

I'm all new to Node and Angular and also to Express framework. Can you please guide me here.

Thanks for your time.

P.S: I've tried removing the /views as well.

it seems that the web client can't find the file login-popup.ejs. Do you have the node code ? (rhyme not intented ^^) — Stian Standahl
– Stian Standahl, Commented Jun 1, 2016 at 6:16
here's a quick link on exposing static files with express expressjs.com/en/starter/static-files.html — Stian Standahl
– Stian Standahl, Commented Jun 1, 2016 at 6:17
Added to question. That is the only Node code I've added to app.js apart from the default code that gets generated — Spark
– Spark, Commented Jun 1, 2016 at 6:18
Possible duplicate of Node JS and AngularJS - script not found - 404 — Krzysztof Safjanowski
– Krzysztof Safjanowski, Commented Jun 1, 2016 at 6:25

Stian Standahl · Accepted Answer · 2016-06-01 06:22:05Z

3

It seems you haven't exposed your static files (css, js).

This article explains how to do this with express.

And here is the code to get started quickly (copy paste from article)

app.use(express.static('public'));

What this does is that the folder public will be exposed to the web.

Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.

edited Jun 1, 2016 at 6:22

answered Jun 1, 2016 at 6:19

Stian Standahl

2,6595 gold badges37 silver badges44 bronze badges

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

1 Comment

Stian Standahl Over a year ago

@Spark - if you choose this solution I would love for you to mark it as the answer.

Collectives™ on Stack Overflow

Working with Angular js, Node js server and express js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related