在我尝试在ng-view中显示部分文件之前,一切正常. /public/app/app.js angular.module('app', ['ngResource', 'ngRoute']);angular.module('app').config(function($routeProvider,$locationProvider){ $locationProvider.html5Mode(true);
/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’时,我得到一个空白页而不是“这是一个部分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>
在本教程中,此配置工作正常,但是当我运行它时,ng-view为空.知道为什么吗？
编辑：
Node.js像魅力一样运行. conf中的某些东西一定有变化,或者我忘记了什么.在教程中,所有内容都像我一样安装了bower,并且javascript,hrefs指向/ vendor /在公共目录中,它似乎有效.
当我查看Javascript控制台时,我收到了所有脚本的错误消息：SyntaxError：Unexpected token’<'哪个<是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)在文件中放：
{
"directory": "public/vendor"
}
这将把凉亭组件加载到您想要的位置.文件’.bowerrc’是bower的配置文件,您可以在以下位置找到指南：http://bower.io/
HTH