ng-view不支持在AngularJS / Express中部署 [英] ng-view not working with partials in AngularJS/Express
问题描述
一切正常，直到我尝试在ng-view中显示部分文件。
/public/app/app.js / p>
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
头
链接（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）
块主要内容
包含脚本
/server/includes/scripts.jade （版本号不在脚本中）
脚本（type =text / javascript，src =/ vendor / jquery / jquery.js）2.1.0
脚本（type =text / javascript，src = /vendor/angular/angular.js）1.2.16
脚本（type =text / javascript，src =/ vendor / angular-resource / angular-resource.js）
script type =text / javascript，src =/ vendor / angular-route / angular-route.js）
脚本（type =text / javascript，src =/ app / app.js）
/views/index.jade
extends ../includes/layout
块主内容
section.content
div（ng-view）
/views/partials/main.jade
h1此部分
h2 {{myVar}}
最后 server.js
var express = require（'express'），
stylus = require（'stylus'）;
var env = process.env.NODE_ENV = process.env.NODE_ENV || 发展;
var app = express（）;
函数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的这是一个部分你好角色：
<！DOCTYPE html 5>
< html>
< head>
< link rel =stylesheethref =/ css / bootstrap.css/>
< link rel =stylesheethref =/ vendor / toastr / toastr.css/>
< link rel =stylesheethref =/ css / site.css/>< / head>
< body ng-app =app>
< section class =content>
< divng-view =ng-view>< / div>
< / section>
< script type =text / javascriptsrc =/ vendor / jquery / jquery.js>< / script>
< script type =text / javascriptsrc =/ vendor / angular / angular.js>< / script>
< script type =text / javascriptsrc =/ vendor / angular-resource / angular-resource.js>< / script>
< script type =text / javascriptsrc =/ vendor / angular-route / angular-route.js>< / script>
< script type =text / javascriptsrc =/ app / app.js>< / script>< / body>< / html>
在本教程中，此配置工作正常，但是当我运行它时，ng视图为空。任何想法为什么？
编辑：
Node.js像一个魅力一样运行。在conf中我必须改变一些东西，或者我忘记了某些东西。在本教程中，所有的东西都像我一样安装了bower，而javascript，hrefs则指向/ vendor /在公共目录中，似乎是有效的。
我查看了Javascript控制台，我收到所有脚本的错误消息： SyntaxError：意外的标记'<'是HTTP错误消息的开始。
所以我将所有被调用的文件复制到/ vendor /更改/server/includes/scripts.jade中的url 喜欢/vendor/jquery/jquery.js到vendor / jquery.js，它的工作。
但我觉得我应用了一个补丁。有凉意，不应该使用以前的设置吗？
解决方案不知道这将有多大帮助，但我注意到所有凉亭包在bower_components目录中。这是bower的默认值，除非您指定另一个目录。所以，如果你想要安装bower组件说'/ public / vendor'，请执行以下操作：
1）创建一个名为'.bowerrc'并保存的文件在你的根目录即与gitignore，bower.json等。
2）在文件put：
code> {
directory：public / vendor
}
这将加载您想要的组件。文件'.bowerrc'是一个配置文件，您可以通过以下方式找到指导： http://bower.io/
HTH
Everything was working until I tried to display a partial file in 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 (version number are not in the script)
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 }}
and finally 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:
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:
<!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?
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.
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.
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.
But I feel like I applied a patch. With bower, shouldn't it work with the previous settings?
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:
1) create a file called ' .bowerrc ' and save it in your root directory ie. with gitignore, bower.json, etc.
2) in the file put:
{
"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/
HTH
这篇关于ng-view不支持在AngularJS / Express中部署的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
