Hello Everyone I m creating a SPA by using angular with express/NodeJs I have given it a try but it is giving me error however when i try to use app.get("*",function(req,res){ res.sendFile(template.ejs); })
then only this specified templates is being displayed in index.ejs view tag whenever i try to navigate to some other link
GET http://localhost:4000/templates/home.ejs 404 (Not Found) angular.js:15536 Error: [$templateRequest:tpload] Failed to load template: /templates/home.ejs (HTTP status: 404 Not Found)
Here is my directory structure :
server.js
--**js**
myangular.js
--**views**
--**pages**
index.ejs
--**templates**
home.ejs
about.ejs
courses.ejs
myAngular.js
var app = angular.module('myApp',['ngRoute'])
.config(function($routeProvider, $locationProvider){
// $locationProvider.hashPrefix('');
$routeProvider
.when("/home",{
templateUrl : "/templates/home.ejs",
controller : "homeController"
})
.when("/about",{
templateUrl : "/templates/about.ejs",
controller : "aboutController"
})
.when("/courses",{
templateUrl : "/templates/courses.ejs",
controller : "coursesController"
})
$locationProvider.html5Mode(true);
})
.controller("homeController",function($scope){
$scope.title = "Home Page"
})
.controller("aboutController",function($scope){
$scope.title = "About Page"
})
.controller("coursesController",function($scope){
$scope.title = "Courses Page"
})
server.js
var http = require('http');
var mysql = require('mysql');
var express = require('express');
var bodyParser = require('body-parser');
var router = express.Router();
var path = require('path');
var app = express();
app.use(bodyParser.urlencoded({extended:true}));
//app.set('view engine','ejs');
app.engine('html', require('ejs').__express);
app.set('view engine','html');
app.set('views',__dirname+'/views/pages');
app.set('view engine','ejs');
const siteTitle = "Simple Application";
const baseURL = "localhost:4000";
app.use('/css',express.static(__dirname+'/node_modules/bootstrap/dist/css'));
app.use('/js',express.static(__dirname+'/node_modules/bootstrap/dist/js'));
app.use('/js',express.static(__dirname+'/node_modules/jquery/dist'));
app.use('/js',express.static(__dirname+'/node_modules/angular/'));
app.use('/js',express.static(__dirname+'/node_modules/angular-route'));
app.use('/js',express.static(__dirname+'/js/'));
app.use(express.static(path.join(__dirname, 'views')));
app.get('/',function(req,res){
res.render('index',{
siteTitle : siteTitle,
pageTitle : 'Index Page',
})
})
app.get('/courses',function(req,res){
res.sendFile(__dirname+'/views/pages/templates/courses.ejs');
})
app.get('/about',function(req,res){
res.sendFile(__dirname+'/views/pages/templates/about.ejs');
})
app.listen(4000,function(){
console.log("connection Established");
})
index.ejs
<html ng-app="myApp" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title><%= siteTitle %> - <%= pageTitle %></title>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<base href="/" />
</head>
<body>
<div class="float-left left-menu">
<div class="list-items">
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/courses">Courses</a></li>
<li><a href="/students">Students</a></li>
</ul>
</div>
</div>
<div class="float-left right-menu">
<div class="main-container">
<ng-view></ng-view>
</div>
</div>
<div class="clearfix"></div>
<script type="text/javascript" src="/js/angular.js"></script>
<script type="text/javascript" src="/js/angular-route.min.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
</body>
</html>
Any kind of help will be appreciated thanks
Aucun commentaire:
Enregistrer un commentaire