ng-view无法在AngularJS / Express中使用局部函数

Lef*_*fty 5 node.js express angularjs pug

一切正常,直到我尝试在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";
});
Run Code Online (Sandbox Code Playgroud)

/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
Run Code Online (Sandbox Code Playgroud)

/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")
Run Code Online (Sandbox Code Playgroud)

/views/index.jade

extends ../includes/layout

block main-content
  section.content
    div(ng-view) 
Run Code Online (Sandbox Code Playgroud)

/views/partials/main.jade

h1 This a Partial
h2 {{ myVar }}
Run Code Online (Sandbox Code Playgroud)

最后是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 + '…');
Run Code Online (Sandbox Code Playgroud)

目录结构: 网站的结构

当我启动“ node server.js”并转到“ localhost:3030”时,使用以下HTML会得到一个空白页,而不是“这是部分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>
Run Code Online (Sandbox Code Playgroud)

在本教程中,此配置可以完美运行,但是当我运行它时,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”,并且可以正常工作。

但是我觉得我已经贴了补丁。使用凉亭时,它不能与以前的设置一起使用吗?

小智 1

不确定这会有多大帮助,但我注意到所有的 Bower 包都在“bower_components”目录中。这是 Bower 的默认目录,除非您指定另一个目录。因此,如果您希望安装 Bower 组件(例如“/public/vendor”),请执行以下操作:

1)创建一个名为“.bowerrc”的文件并将其保存在您的根目录中,即。与 gitignore、bower.json 等

2)在文件中放入:

{
  "directory": "public/vendor"
}
Run Code Online (Sandbox Code Playgroud)

这会将 Bower 组件加载到您想要的位置。文件“.bowerrc”是 Bower 的配置文件,您可以在以下位置找到指导:http://bower.io/

华泰