Угловой ngRoute с Express / Nodejs для SPA - PullRequest
Новая
       17

Угловой ngRoute с Express / Nodejs для SPA

0 голосов
/ 01 декабря 2018

Привет всем. Я создаю SPA, используя angular с express / NodeJs. Я попробовал, но он выдает ошибку, однако, когда я пытаюсь использовать app.get ("*", function (req, res) {res.sendFile (template.ejs);})

тогда только этот указанный шаблон отображается в теге просмотра index.ejs всякий раз, когда я пытаюсь перейти к какой-либо другой ссылке

GEThttp://localhost:4000/templates/home.ejs 404 (не найдено) angular.js: 15536 ​​Ошибка: [$ templateRequest: tpload] Не удалось загрузить шаблон: /templates/home.ejs (статус HTTP: 404 не найден)

Вот моя структура каталогов: 

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>

Любая помощь будет оценена спасибо

...