ng-view 不适用于 AngularJS/Express 中的部分
Posted
技术标签:
【中文标题】ng-view 不适用于 AngularJS/Express 中的部分【英文标题】：ng-view not working with partials in AngularJS/Express 【发布时间】：2014-06-15 09:55:32 【问题描述】：在我尝试在 ng-view 中显示部分文件之前，一切正常。
/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
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（版本号不在脚本中）
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
extends ../includes/layout
block main-content
section.content
div(ng-view)
/views/partials/main.jade
h1 This a Partial
h2 myVar
最后是 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 + '…');
目录结构：
当我启动 'node server.js' 并转到 'localhost:3030' 时，我得到一个空白页面，而不是带有此 HTML 的“This is a Partial Hello Angular”：
<!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>
在本教程中，此配置运行良好，但是当我运行它时，ng-view 是空的。知道为什么吗？
编辑：
Node.js 运行起来就像一个魅力。 conf中一定发生了一些变化，或者我忘记了一些东西。在教程中，所有东西都像我一样用 bower 安装，并且 javascript、hrefs 指向公共目录中的 /vendor/，看起来它可以工作。
当我查看 Javascript 控制台时，我收到了所有脚本的以下错误消息：SyntaxError: Unexpected token '<' 其中
所以我将所有错误调用的文件复制到 /vendor/ 将“/server/includes/scripts.jade”中的 url 更改为“/vendor/jquery/jquery.js”到“vendor/jquery.js”和成功了。
但我觉得我应用了一个补丁。有了 bower，不应该和之前的设置一起工作吗？
【问题讨论】：
浏览器控制台是否显示任何错误？否则，请查看您的快速应用程序是否在终端中输出任何错误。 感谢@amesee 在 unix 终端中没有错误，但它在 safari js 终端中，我更新了帖子，因为我有一个与主题相关的问题。 【参考方案1】：不确定这有多大帮助，但我注意到所有的凉亭包都在“bower_components”目录中。这是 bower 的默认设置，除非您指定另一个目录。因此，如果您希望安装 Bower 组件，例如“/public/vendor”，请执行以下操作：
1) 创建一个名为“.bowerrc”的文件并将其保存在您的根目录中，即。使用 gitignore、bower.json 等。
2) 在文件中放置：
"directory": "public/vendor"
这会将凉亭组件加载到您想要的位置。文件 '.bowerrc' 是 bower 的配置文件，您可以在以下位置找到指南：http://bower.io/
HTH
【讨论】：
【参考方案2】：你的 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();
);
这样修改
【讨论】：
以上是关于ng-view 不适用于 AngularJS/Express 中的部分的主要内容，如果未能解决你的问题，请参考以下文章