Question

大家好，我正在通过express / NodeJs使用angular创建SPA 我已经尝试过，但是当我尝试使用app.get（“ *”，function（req，res）{ res.sendFile（template.ejs）; }）

然后，每当我尝试导航到其他链接时，只会在index.ejs视图标记中显示此指定模板

获取http://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>

任何帮助将不胜感激

带有Express / Nodejs的Angular ngRoute用于SPA

0 个答案: