ng-view不支持AngularJS / Express中的partials

Everything was working until I tried to display a partial file in ng-view.

一切正常，直到我尝试在ng-view中显示部分文件。

/public/app/app.js

/public/app/app.js

angular.module('app', ['ngResource', 'ngRoute']);

angular.module('app').config(function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
      .when('/', {templateUrl: '/partials/main', controller: 'mainCtrl'});
 });

angular.module('app').controller('mainCtrl', function($scope){
    $scope.myVar = "Hello Angular";
});

/server/includes/layout.jade

/server/includes/layout.jade

doctype html 5
html
  head
    link(rel="stylesheet", href="/css/bootstrap.css")
    link(rel="stylesheet", href="/vendor/toastr/toastr.css")
    link(rel="stylesheet", href="/css/site.css")
 body(ng-app="app")
    block main-content
    include scripts

/server/includes/scripts.jade (version number are not in the script)

/server/includes/scripts.jade（版本号不在脚本中）

script(type="text/javascript", src="/vendor/jquery/jquery.js") 2.1.0
script(type="text/javascript", src="/vendor/angular/angular.js") 1.2.16
script(type="text/javascript", src="/vendor/angular-resource/angular-resource.js")
script(type="text/javascript", src="/vendor/angular-route/angular-route.js")
script(type="text/javascript", src="/app/app.js")

/views/index.jade

/views/index.jade

extends ../includes/layout

block main-content
  section.content
    div(ng-view)

/views/partials/main.jade

/views/partials/main.jade

h1 This a Partial
h2 {{ myVar }}

and finally server.js

最后是server.js

var express = require('express'),
stylus = require('stylus');

var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var app = express();

function compile(str, path){
return stylus(str).set('filename', path)
}

app.configure(function (){
  app.set('views', __dirname + '/server/views');
  app.set('view engine', 'jade');
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(stylus.middleware(
  {
      src: __dirname + '/public',
      compile: compile
  }
  ));
  app.use(express.static (__dirname + '/public'));
});

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

app.get('*', function(req, res) {
 res.render('index'); 
});

var port = 3030;
app.listen(port);
console.log('Listening on port' + port + '…');

Directory structure: ng-view不支持AngularJS / Express中的partials

目录结构：

When I launch the 'node server.js' and go to 'localhost:3030', I get a blank page instead of "This is a Partial Hello Angular" with this HTML:

当我启动'node server.js'并转到'localhost：3030'时，我得到一个空白页而不是“这是一个部分Hello Angular”这个HTML：

<!DOCTYPE html 5>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.css"/>
<link rel="stylesheet"    href="/vendor/toastr/toastr.css"/>
<link rel="stylesheet" href="/css/site.css"/></head>
<body ng-app="app">
<section class="content">
 <div ng-view="ng-view"></div>
</section>
<script type="text/javascript" src="/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/vendor/angular/angular.js"></script>
<script type="text/javascript" src="/vendor/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="/vendor/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/app/app.js"></script></body></html>

In the tutorial this config works perfectly, but when I run it, the ng-view is empty. Any idea why?

在本教程中，此配置工作正常，但是当我运行它时，ng-view为空。知道为什么吗？

EDIT:

编辑：

Node.js runs like a charm. Something must have changed in the conf or I forgot something. In the tutorial everything was installed with bower like I did, and the javascript, hrefs were pointing to /vendor/ in the public directory and it seemed like it worked.

Node.js像魅力一样运行。在conf中有些东西必须改变，否则我会忘记一些东西。在教程中，所有内容都像我一样安装了bower，并且javascript，hrefs指向/ vendor /在公共目录中，它似乎有效。

When I looked in the Javascript console, I got this error message for all scripts: SyntaxError: Unexpected token '<' which < is the beginning of an HTTP error message.

当我查看Javascript控制台时，我收到了所有脚本的错误消息：SyntaxError：意外的标记'<'，其中 <是http错误消息的开头。< p>

So I copied all the called files with error into /vendor/ change the url in "/server/includes/scripts.jade" like "/vendor/jquery/jquery.js" to "vendor/jquery.js" and it worked.

所以我将带有错误的所有被调用文件复制到/ vendor /将“/server/includes/scripts.jade”中的url更改为“/vendor/jquery/jquery.js”到“vendor / jquery.js”并且它有效。

But I feel like I applied a patch. With bower, shouldn't it work with the previous settings?

但我觉得我应用了补丁。有了凉亭，它不应该与之前的设置一起使用吗？

3 个解决方案

#1

Not sure how much this will help but I notice all the bower packages are in the 'bower_components' directory. That is the default for bower unless you specify another directory. So, if you want the bower components installed say, '/public/vendor', do the following:

不知道这有多大帮助，但我注意到所有的凉亭包都在'bower_components'目录中。除非您指定另一个目录，否则这是bower的默认值。因此，如果您希望安装bower组件，请说'/ public / vendor'，请执行以下操作：

1) create a file called ' .bowerrc ' and save it in your root directory ie. with gitignore, bower.json, etc.

1）创建一个名为'.bowerrc'的文件并将其保存在根目录中，即。与gitignore，bower.json等

2) in the file put:

2）在文件中放：

{
  "directory": "public/vendor"
}

That will load the bower components where you want them. The file ' .bowerrc ' is a config file for bower and you can find the guidance at: http://bower.io/

这将把凉亭组件加载到您想要的位置。文件'.bowerrc'是凉亭的配置文件，您可以在以下网址找到指南：http：//bower.io/

HTH

#2

Thers is something off in your app.js file. Replace it with this and you should be good to go:

在你的app.js文件中，这些是关闭的。替换它，你应该很高兴：

var app = angular.module('app', ['ngResource', 'ngRoute']);

angular.module('app').config(function($routeProvider, $locationProvider){  
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'});
});


angular.module('app').controller('mainCtrl', function($scope){  
    $scope.myVar = "Hello Angular";
});

#3

  app.get('*', function(req, res,next) {
     if(req.xhr != true)
       {
         res.render('index');
       } else
       {
       next();
    }
        });

modify like this

像这样修改

#1