Question

我正在按照教程编写一个角度应用程序。令我惊讶的是，我完全按照我的节点js开始没问题。但是，我的角度并没有按照假设返回模板。我看到了类似的问题 here 相同的教程和同样的问题。但是，问题没有得到解答。以下是我的目录结构

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";
});

我的layout.jade

doctype 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

我的main.jade

h1 This is a partial
h2 {{ myVar }}

我的server.js中的路由设置为

app.get('partials/:partialPath',function(req,res){
    res.render('partials/' + req.params.partialPath);
});
app.get('*', function(req,res){
    res.render('index');
});

我的index.jade

extends ../includes/layout

block main-content
    section.content
       div(ng-view)

虽然我认为不应该成为一个问题，因为我开始使用部分视图作为页面的一部分。当我跑，我的页面返回黑色。我检查元素并确保所有js和css在哪里加载。当我查看源代码时，会生成下面的html源代码。

<!DOCTYPE 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></div></section>
   <script type="text/javascript" src="vendor/jquery/dist/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>

我怀疑来自app.js的routeProvider

.when('/', { templateUrl: 'partials/main', controller: 'mainCtrl'});

尝试了

.when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'});

一切都无济于事。请问哪里出错了？我尽力了。我甚至重新启动了啧啧但还是空白。任何帮助将不胜感激。

Answer 1

感谢您的时间。事实证明问题在于我的布局

doctype 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

已更改为

 doctype html
    head
       base(href='/')
       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

缺少的是

base(href='/')

如果删除该库，则不会加载模板。我从另一个tut视频中了解到了这一点，并且＃34; [Tuts Plus]使用AngularJS Video Tutorial＆＃34;从头开始构建Web应用程序。。主持人特别提到base(href='/')的重要性，并警告永远不要忘记。另外，还有来自@Alex Choroshin的另一个很好的例子回答here。你应该下载他建议的文件。这是一个完美的例子。感谢

angular js ng-view返回blanc partials - Express / Jade

1 个答案: