时间戳

首页 > 解决方案 > 带有 Express/Nodejs 的 Angular ngRoute 用于 SPA

angularjs - 带有 Express/Nodejs 的 Angular ngRoute 用于 SPA

问题描述

大家好，我正在通过使用 angular 和 express/NodeJs 创建 SPA 我已经尝试过，但是当我尝试使用 app.get("*",function(req,res){ res.sendFile 时它给了我错误(模板.ejs);})

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

GET 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

我的Angular.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"
                  })

服务器.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");
})

索引.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>

任何形式的帮助将不胜感激谢谢

标签： angularjsnode.jsexpresswebsingle-page-application

解决方案

推荐阅读