NG-视图不与AngularJS / EX preSS谐音工作 [英] ng-view not working with partials in AngularJS/Express
问题描述
一切工作，直到我试图以显示NG-鉴于部分文件。
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 （版本号是不是在脚本）
/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 }}
和最后的 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:
当我启动节点server.js'进入'本地主机：3030，我得到的，而不是这是一个局部的Hello角这个HTML空白页：
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>
在本教程中这个配置完美的作品，但是当我运行它时，NG-观点是空的。任何想法，为什么？
In the tutorial this config works perfectly, but when I run it, the ng-view is empty. Any idea why?
编辑：
Node.js的运行就像一个魅力。东西必须在conf已更改，或者我忘了什么事。在本教程中一切都被安装了亭子像我一样，和JavaScript，分别的HREF指向/供应商/公共目录，它似乎像它的工作。
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.
当我在JavaScript控制台中望去，我得到的所有脚本此错误消息：语法错误：意外令牌'＆LT; 其中＆LT;是HTTP错误消息的开头。
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.
所以我复制所有文件名为错误进入/供应商/更改URL中的/server/includes/scripts.jade像/vendor/jquery/jquery.js到供应商/的jquery.js和它的工作。
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.
但我觉得我申请了一个补丁。随着凉亭，不应该将其与previous设置工作的？
But I feel like I applied a patch. With bower, shouldn't it work with the previous settings?
推荐答案
不知道有多少，这将帮助，但我发现所有的凉亭包在'bower_components目录。这是凉亭，除非你指定另一个目录的默认。所以，如果你想安装的组件鲍尔说，'/公/供应商，做到以下几点：
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）创建一个名为.bowerrc文件并将其保存在你的根目录下即。与gitignore，bower.json等。
1) create a file called ' .bowerrc ' and save it in your root directory ie. with gitignore, bower.json, etc.
2）在文件中写：
{
"directory": "public/vendor"
}
这将加载你想让他们的凉亭组成部分。该文件'.bowerrc'是鲍尔的配置文件，你可以在这里得到指导： http://bower.io/
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/
心连心
这篇关于NG-视图不与AngularJS / EX preSS谐音工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
