角度UI路由器投掷500错误

我试图重构MEAN堆栈应用程序中的一些视图逻辑，并运行到UI路由器的一些问题。对Angular来说，我还是一个新手，所以我认为我的问题可能非常简单，我错过了。角度UI路由器投掷500错误

我想通过一些我在堆栈溢出这里找到的东西，但由于某种原因，我不断收到内部服务器错误（500）。任何人都可以看看？

我在下面的代码试图模仿this。在我的index.js

指数路线：

router.get('/', function (req, res, next) res.render('index.html'); });

查看发动机设置在app.js：在我的角度应用js脚本

app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.engine('html', require('ejs').renderFile);

的app.config方法：

app.config ([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    '$locationProvider', 
    function($stateProvider, $urlRouterProvider, $locationProvider) { 
     $stateProvider 
     .state('common', { 
      templateUrl: 'common.html', // exists in views folder 
      abstract: true 
     }) 
     .state('hi', { 
      url:'/', 
      templateUrl:'/hi.html' // also in views folder 
     }); 
    $locationProvider.html5Mode(true); 
}]);

我的index.html：

<!DOCTYPE html> 
<html data-ng-app="djq"> 
<head> 
    <title>Index</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> 
    <script src="/javascripts/youtube.js"></script> 
    <base href="/"> 
</head> 
<body> 
    <div data-ui-view=""> 
    </div> 
</body> 
</html>

我common.html

<section class="content-wrapper"> 
    <div class="main-content" data-ui-view></div> 
</section>

我hi.html

<div>Hi there!</div>

当我开始我的应用程序，并导航到本地主机：5000 /，我收到以下错误：

GET http://localhost:5000/hi.html 500 (Internal Server Error)

让我知道如果我应该p提供更多信息。

更新（已解决）：所以我终于在Edward答案的下面得到了这一切，但这并不是完全正确的解决方案，因为我的文件位于不同的位置。

他提到使用“partials”文件夹。我已经有一个“views”文件夹，它的行为相同。在我的节点app.js我：

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'ejs'); 
app.engine('html', require('ejs').renderFile); 
/* ... */ 
app.use(express.static(path.join(__dirname, 'public'))); 
app.use('/bower_components', express.static(__dirname + '/bower_components'));

所以，我有两个视图/和bower_components /有静态目录。 views /是我所有的html文件所在的地方。

“angularApp.js”是我在客户端使用的角度文件。我编辑它有以下几点：

app.config ([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    '$locationProvider', 
    function($stateProvider, $urlRouterProvider, $locationProvider) { 

     $stateProvider 
      .state('common', { 
       templateUrl: 'views/common.html', 
       abstract: true 
      }) 
      .state('hi', { 
       url: '/', 
       parent: 'common', 
       templateUrl: 'views/hi.html' 
      }); 
      /* ... */ 
$locationProvider.html5Mode(true);

}]）;

所以，如果我们导航到'/'，角将向节点发出请求，以获取文件在views/hi.html。我的问题是我没有处理这个请求。

在我的索引中。JS，这是我对这些类型的请求路由器，我说：

router.get('/views/:name', function(req, res) { 
    var name = req.params.name; 
    res.render(name); 
});

而现在一切都按预期工作:)

来源

2015-05-03 FateNuller

看看你的服务器日志？听起来像服务器端的错误，因为Angular是客户端库 –

我的服务器日志中出现的所有内容是： 04:06:58 web.1 | GET /hi.html 500 18.697 ms - 1421 – FateNuller

@FateNuller我的答案到底对你有帮助吗？ –

这是因为你的谐音不是由服务器提供。你需要建立一个快速路线。

这是更好地在这里解释http://fdietz.github.io/recipes-with-angular-js/backend-integration-with-node-express/implementing-client-side-routing.html

有效地你想要的东西像

app.get('/partials/:name', function (req, res) { 
    var name = req.params.name; 
    res.render('partials/' + name); 
});

和你hi.html既在角度和服务器的partials目录中，在这种情况下，你也应该设置static option for express。

来源

2015-05-03 08:54:03

角度UI路由器投掷500错误

回答

相关问题