Question

我正在尝试重构MEAN堆栈应用程序中的某些视图逻辑并遇到UI路由器的一些问题。我仍然是Angular的新手，所以我认为我的问题可能非常简单，我不知道。

我正在尝试采用我在堆栈溢出时发现的一些东西但由于某种原因我不断收到内部服务器错误（500）。有人能看看吗？

下面的代码试图模仿this。

index.js中的索引路径：

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

在app.js中查看引擎设置：

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

我的angular app js脚本中的

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>

当我启动应用程序并导航到localhost：5000 /时，收到以下错误：

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

如果我应该提供更多信息，请告诉我。

更新（已解决）：所以我终于在爱德华·诺尔斯的帮助下解决了这个问题，但是由于我的文件位于不同的位置，所以这不是正确的解决方案。

他提到使用“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);

}]）;

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

在我的index.js中，我是这些类型请求的路由器，我补充道：

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

现在一切都按预期工作：）

Angular UI-Router抛出500错误

0 个答案: