NickName:Spark Ask DateTime:2016-06-01T14:07:04

Working with Angular js, Node js server and express js

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.

Copyright Notice：Content Author:「Spark」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/37560656/working-with-angular-js-node-js-server-and-express-js